3.8K
CSS spread animation using HTML and CSS
Do you want to learn the CSS animation concept in a simple way? In this tutorial, I am going to show you how to make a CSS spread animation using HTML and CSS. CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Animation Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrap">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #f2f2f2;
}
.wrap{
position: relative;
width: 600px;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
color:red;
}
.wrap span{
position: absolute;
animation: animate 10s linear infinite;
}
.wrap span:nth-child(1){
animation-delay: 0s;
}
.wrap span:nth-child(2){
animation-delay: 1s;
}
.wrap span:nth-child(3){
animation-delay: 2s;
}
.wrap span:nth-child(4){
animation-delay: 3s;
}
.wrapspan:nth-child(5){
animation-delay: 4s;
}
.wrap span:nth-child(6){
animation-delay: 5s;
}
.wrap span:nth-child(7){
animation-delay: 6s;
}
.wrap span:nth-child(8){
animation-delay: 7s;
}
.wrap span:nth-child(9){
animation-delay: 8s;
}
.wrap span:nth-child(10){
animation-delay: 9s;
}
@keyframes animate{
0%{
width: 0;
height: 0;
opacity: 1;
box-shadow: inset 0 0 20px rgba(0,0,0,.5);
background: blue;
}
100%{
width: 100%;
height: 100%;
opacity: 0;
box-shadow: inset 0 0 50px rgba(0,0,0,1);
}
}
For More Tutorials Please Click Here
