Looking for wave text animation using css? This post will help you how to create wave animation text in css. This Animated text Designed by Anton Mudrenok.
wave text animation in css
HTML
[code language=”html”]
<div class="container">
<div class="coast">
<div class="wave-rel-wrap">
<div class="wave"></div>
</div>
</div>
<div class="coast delay">
<div class="wave-rel-wrap">
<div class="wave delay"></div>
</div>
</div>
<div class="text text-w">w</div>
<div class="text text-a">a</div>
<div class="text text-v">v</div>
<div class="text text-e">e</div>
</div>
[/code]
CSS / SCSS
[code language=”css”]
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
@import url(‘https://fonts.googleapis.com/css?family=Muli’);
$textDur: 1050ms;
$waveDur: 2100ms;
html, body {
font-size: 62.5%;
background-color: #00091B;
font-family: ‘Muli’, Helvetica, sans-serif;
}
.container {
position: absolute;
width: 17rem;
height: 10rem;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.text {
color: #fff;
font-size: 6rem;
font-weight: 900;
display: inline-block;
position: absolute;
bottom: 0;
animation: text $textDur ease-in infinite;
transform: translatez(0);
&-w {
left: 0rem;
transform: translate3d(0, -4rem, 0);
animation: text-w $textDur ease-in infinite;
}
&-a {
left: 5.4rem;
animation-delay: 150ms;
}
&-v {
left: 9.6rem;
animation-delay: 230ms;
}
&-e {
left: 13rem;
animation-delay: 310ms;
}
}
.coast { // wave: translate-x
position: absolute;
left: 1.3rem;
bottom: 1.7rem;
width: 6.2rem;
height: 2.2rem;
display: inline-block;
animation: coast $waveDur linear infinite;
transform: translateZ(0);
}
.wave-rel-wrap {
position: relative;
width: 100%;
height: 100%;
perspective: 3rem;
perspective-origin: 0%, 50%;
}
.wave { // wave: width && scale && rotate
position: absolute;
width: 6.2rem;
height: 2.2rem;
border-radius: 1.1rem;
background: radial-gradient(ellipse at center, rgba(116, 241, 252, 1) 0%, rgba(50, 230, 255, 1) 73%, rgba(21, 199, 250, 1) 100%);
display: inline-block;
animation: wave $waveDur linear infinite;
will-change: width;
transform: translateZ(0) scale(0);
}
.delay {
animation-delay: $waveDur / 2;
}
@keyframes text {
0% {
transform: translate3d(0, 0, 0);
}
30% {
transform: translate3d(0, 0, 0);
}
45% {
transform: translate3d(0, -4rem, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
@keyframes text-w {
0% {
transform: translate3d(0, -4rem, 0);
}
38% {
transform: translate3d(0, -4rem, 0);
}
69% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -4rem, 0);
}
}
@keyframes coast {
0% {
transform: translate3d(0, 0, 0);
}
23% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(16rem, 0, 0);
}
100% {
transform: translate3d(16rem, 0, 0);
}
}
@keyframes wave {
0% {
transform: scale(0);
width: 2.2rem;
}
10% {
transform: scale(1);
}
23% {
width: 2.2rem;
}
32% {
width: 6.1rem;
}
42% {
width: 5rem;
transform: rotateY(0deg) scale(1, 1);
}
51% {
transform: rotateY(90deg) scale(0.6, 0.2);
}
52% {
transform: rotateY(90deg) scale(0);
}
100% {
transform: rotateY(90deg) scale(0);
}
}
[/code]
