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