Home » CSS spread animation using HTML and CSS

CSS spread animation using HTML and CSS

by techmidpoint
CSS Spread animation using HTML and CSS

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

You may also like

Leave a Comment