Make a Cool Text Wave Animation using Pure CSS


in this tutorial, I will show you how to make a cool text Wave Animation in CSS, we will see how to create an animation using Keyframe and how to use the animation-delay property of CSS.

HTML CODE



 <!DOCTYPE HTML>


<html>
    <head>
        <link rel="stylesheet" href="main.css">
    </head>
    
    <body>
       <div class="container">
          <h1>Thank you for</h1>
          <h1 class="sub"><span>1</span><span>0</span><span>0</span><span>0</span></h1>
          <h1 class="red">Subscribers</h1> 
       </div>
        
        
    </body>
</html>

CSS Code



 @import url('https://fonts.googleapis.com/css?family=Nunito|Open+Sans|Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    outline: 0;
}
body{
    background-color: #121212;
}
.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
h1{
    text-align: center;
    color: #fafafa;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    margin: 25px 0;
    text-transform: uppercase;
    font-size: 5rem;
    letter-spacing: 1.2rem;
    overflow: hidden;
    
}
.red{
    color: #c4302b;
}
.sub{
    font-size: 10rem;
    transform: rotate(-1deg) skewX(-10deg);
    text-shadow: 3px 1px #c4302b;
}
.sub span:nth-child(1){
    position: relative;
    bottom: -200px;
    animation: first 2s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    
}
.sub span:nth-child(2){
    position: relative;
    bottom: -200px;
    animation: first 2s;
    animation-delay: 0.25s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    
}
.sub span:nth-child(3){
    position: relative;
    bottom: -200px;
    animation: first 2s;
    animation-delay: 0.5s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    
}
.sub span:nth-child(4){
    position: relative;
    bottom: -200px;
    animation: first 2s;
    animation-delay: 0.75s;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;

}
@keyframes first{
    0%{
        bottom: -200px;
    }
    70%{
        bottom: 0;
    }
    100%{
        bottom: -200px;
    }
}


Make a Cool Text Wave Animation using Pure CSS Make a Cool Text Wave Animation using Pure CSS Reviewed by Medics on August 30, 2019 Rating: 5

1 comment:

-->
Powered by Blogger.