To learn how to create the CSS flip text effect/animation follow the steps below and watch the video tutorial.
Demo:
*to see the animation on the website click here.
Step1.
Add HTML
Create the text container and add characters:
<div class="flip-text">
<div class="h">H</div>
<div class="e">e</div>
<div class="l">l</div>
<div class="l-two">l</div>
<div class="o">o</div>
<div class="mark">,</div>
<div class="w">W</div>
<div class="o-two">o</div>
<div class="r">r</div>
<div class="l-three">l</div>
<div class="d">d</div>
<div class="mark-two">!</div>
</div>Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background-color: #0fa3b1;
}Style the characters:
.flip-text {
position: relative;
display: flex;
font-size: 80px;
color: #d9e5d6;
font-family: arial;
font-weight: 900;
letter-spacing: -5px;
text-shadow: 2px 2px 2px rgba(0,0,0,.3);
}Animate characters:
@keyframes flip {
0% {transform: rotateY(0) translateY(0)) scale(1,1);}
10% {transform: rotateY(0) translateY(-30px) scale(.95,1.1);}
25% {transform: rotateY(90deg) translateY(0) scale(1.05,.95);}
40% {transform: rotateY(0) translateY(0) scale(1,1);}
100% {transform: rotateY(0) translateY(0) scale(1,1);}
}
.h, .e, .l, .l-two, .o, .mark, .w, .o-two, .r, .l-three, .d, .mark-two {
animation: flip 1.7s ease-in-out infinite;
}
.e {
animation-delay: .05s;
}
.l {
animation-delay: .1s;
}
.l-two {
animation-delay: .15s;
}
.o {
animation-delay: .2s;
}
.mark {
animation-delay: .25s;
}
.w {
animation-delay: .3s;
}
.o-two {
animation-delay: .35s;
}
.r {
animation-delay: .4s;
}
.l-three {
animation-delay: .45s;
}
.d {
animation-delay: .5s;
}
.mark-two {
animation-delay: .55s;
}Watch also the video tutorial:
Enjoy coding!
Hey, here’s something that might interest you:
