<div class="container">
  <div>
    <span>F</span>
    <span>L</span>
    <span>I</span>
    <span>P</span>
  </div>
</div>

html{
  height:100%;
}

body{
  height:100%;
  background:#555;
}
.container{
  width:100%;
  position:relatvie;
}

div{
  font-family: 'Erica One', cursive;
  font-size: 150px;
  text-align:center;
  perspective: 800px;
  position:absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

span{
  display:inline-block;
  margin-left:-40px;
  color:#1eccf3;
  transform-origin: 50% 70%;
}

span:nth-child(2n){
  color:#ffc024;
}

span:nth-child(1){
  animation: flipper 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) both, fadeIn 1s both;
}

span:nth-child(2){
  animation: flipper 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .2s both, fadeIn 1s both;
}

span:nth-child(3){
  animation: flipper 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .4s both, fadeIn 1s both;
}

span:nth-child(4){
  animation: flipper 1s cubic-bezier(0.68, -0.55, 0.26, 1.55) .6s both, fadeIn 1s both;
}

@keyframes flipper{
  from{transform: rotateX(90deg);}
  to{transform: rotateX(0deg);}
}

@keyframes fadeIn{
  from{opacity:0};
  to{opacity:1};
}