Text animation using css keyframes ( source code )

Text animation using css keyframes ( source code )

HTML

<div class="wrapper"> <div class="text-area"> <span>d</span> <span>i</span> <span>v</span> <span>i</span> <span>n</span> <span>e</span> <span>c</span> <span>t</span> <span>o</span> <span>r</span> </div> <p> front-end tutorial</p> </div>


CSS


body{ background-image: url(https://i.postimg.cc/JnPm59Jh/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: 35px; font-family: bignoodletitling; letter-spacing: 2px; margin: 15px 0; } .text-area { font-size: 70px; font-family: Roboto; text-transform: uppercase; font-weight: bold; } .text-area span { color: #262626; opacity: 0; transform: rotate(-180deg) translate(150px, 0); animation: animate 3s forwards; /*-webkit-text-stroke: 1px #000; text-shadow: 30px 21px 8px rgba(0,0,0,0.5);*/ } .text-area span { 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; } .text-area span:nth-of-type(10) { animation-delay: .9s; } @keyframes animate { 30% { transform: translate(0, -50px) rotate(180deg) scale(1); } 50% { transform: translate(0, 20px) scale(.8) rotate(0deg); opacity: 1; } 80% { transform: translate(-100px, -100px) scale(1.5) rotate(-180deg); opacity: 0; } 100% { transform: translate(0) scale(1) rotate(0deg); opacity: 1; } }