flip Archives - Lena Design

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: