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
Reviewed by Medics
on
August 30, 2019
Rating:
Love this Animation
ReplyDelete