Text animation using css3 keyframes

Text animation using css3 keyframes

Checkout the video


HTML

<div class="wrapper"> <div class="text-area"> <span>m</span> <span>o</span> <span>u</span> <span>r</span> <span>i</span>   <span>f</span> <span>o</span> <span>o</span> <span>d</span> </div> <p> Taste of Asian cuisine</p> </div>


CSS


body{ background-image: url(https://i.postimg.cc/CMnNNWwB/1.jpg); -webkit-background-size: cover; background-size: cover; background-position: center center; height: 100vh; } .wrapper{ position: absolute; top: 50%; left: 30%; transform: translate(-50%,-50%); } .wrapper p { font-size: 50px; font-family: bignoodletitling; letter-spacing: 2px; margin: 15px 0; -webkit-text-stroke: 2px #fff; } .text-area { font-size: 70px; font-family: Roboto; text-transform: uppercase; font-weight: bold; } .text-area span { color: #fff; opacity: 0; transform: translate(-150px, -50px) rotate(-180deg) scale(3); animation: animate 4s forwards; display: inline-block; } .text-area span:nth-of-type(2) { animation-delay: .1s; } .text-area span:nth-of-type(3) { animation-delay: .2s; } .text-area span:nth-of-type(4) { animation-delay: .3s; } .text-area span:nth-of-type(5) { animation-delay: .4s; } .text-area span:nth-of-type(6) { animation-delay: .5s; } .text-area span:nth-of-type(7) { animation-delay: .6s; } .text-area span:nth-of-type(8) { animation-delay: .7s; } .text-area span:nth-of-type(9) { animation-delay: .8s; } @keyframes animate { 60% { transform: translate(20px, 20px) rotate(30deg) scale(.3); } 100% { transform: translate(0) rotate(0) scale(1); opacity: 1; } }