CSS + HTML text animation

HTML
<div class="wrapper"> <div class="letters"> <span class="letter">P</span> <span class="letter">U</span> <span class="letter">M</span> <span class="letter">P</span> <span class="letter">K</span> <span class="letter">I</span> <span class="letter">N</span> <span class="letter"> </span> <span class="letter"> </span> <span class="letter"> </span> <span class="letter"> </span> <span class="letter">S</span> <span class="letter">P</span> <span class="letter">I</span> <span class="letter">C</span> <span class="letter">E</span> <span class="letter">?</span> </div> </div>
CSS
body { text-align: center; background-color: rgba(225,93,66,0.9); } .wrapper { position: absolute; top: 50%; left: 50%; width: 90%; font-size: 0; transform: translate(-50%); } p { font-size: 14px; font-weight: 500; color: #F8DFDB; opacity: 0.1; } .letter { font-family: Futura TP,Trebuchet MS,Arial,sans-serif; width: auto; display: inline-block; vertical-align: middle; position: relative; overflow: hidden; margin: 0 0.13em; font-size: 55px; font-weight: 600; line-height: 45px; text-transform: uppercase; color: #FFFFFF; } .letter:before { position: absolute; top: 0; left: 0; width: 100%; word-break: break-all; background-color: rgba(227,108,84,1); } .letter:nth-child(1):before { content: "izcpoaoaqkicmeesor"; margin-top: -455px; animation-name: letter1; animation-duration: 1.0028571429s; animation-delay: 0.73s; animation-fill-mode: forwards; } @keyframes letter1 { from { margin-top: -455px; } to { margin-top: 45px; } } .letter:nth-child(2):before { content: "psazcricmaeioqoeok"; margin-top: -70px; animation-name: letter2; animation-duration: 0.3466666667s; animation-delay: 0.87s; animation-fill-mode: forwards; } @keyframes letter2 { from { margin-top: -70px; } to { margin-top: 45px; } } .letter:nth-child(3):before { content: "iqroccosaeaiopmkze"; margin-top: -175px; animation-name: letter3; animation-duration: 1.1666666667s; animation-delay: 0.95s; animation-fill-mode: forwards; } @keyframes letter3 { from { margin-top: -175px; } to { margin-top: 45px; } } .letter:nth-child(4):before { content: "oaqmcrpsziiceooeka"; margin-top: -35px; animation-name: letter4; animation-duration: 1.4s; animation-delay: 0.3s; animation-fill-mode: forwards; } @keyframes letter4 { from { margin-top: -35px; } to { margin-top: 45px; } } .letter:nth-child(5):before { content: "roaioqepkosimzccae"; margin-top: -490px; animation-name: letter5; animation-duration: 0.896s; animation-delay: 0.76s; animation-fill-mode: forwards; } @keyframes letter5 { from { margin-top: -490px; } to { margin-top: 45px; } } .letter:nth-child(6):before { content: "eamqkspzaccrooeo"; margin-top: -560px; animation-name: letter6; animation-duration: 2.56s; animation-delay: 0.32s; animation-fill-mode: forwards; } @keyframes letter6 { from { margin-top: -560px; } to { margin-top: 45px; } } .letter:nth-child(7):before { content: "eariooescckpiazqmo"; margin-top: -175px; animation-name: letter7; animation-duration: 2.0666666667s; animation-delay: 0.98s; animation-fill-mode: forwards; } @keyframes letter7 { from { margin-top: -175px; } to { margin-top: 45px; } } .letter:nth-child(8):before { content: "opakzcomicieeosraq"; margin-top: -140px; animation-name: letter8; animation-duration: 1.44s; animation-delay: 0.55s; animation-fill-mode: forwards; } @keyframes letter8 { from { margin-top: -140px; } to { margin-top: 45px; } } .letter:nth-child(9):before { content: "roepeaccmioqisazok"; margin-top: -385px; animation-name: letter9; animation-duration: 3.1166666667s; animation-delay: 0.15s; animation-fill-mode: forwards; } @keyframes letter9 { from { margin-top: -385px; } to { margin-top: 45px; } } .letter:nth-child(10):before { content: "aaooisrcozciekemqp"; margin-top: -140px; animation-name: letter10; animation-duration: 1.792s; animation-delay: 0.44s; animation-fill-mode: forwards; } @keyframes letter10 { from { margin-top: -140px; } to { margin-top: 45px; } } .letter:nth-child(11):before { content: "oeoakaqmrcziiscepo"; margin-top: -560px; animation-name: letter11; animation-duration: 2.5223529412s; animation-delay: 0.33s; animation-fill-mode: forwards; } @keyframes letter11 { from { margin-top: -560px; } to { margin-top: 45px; } } .letter:nth-child(12):before { content: "cqikomsoczreepoaia"; margin-top: -525px; animation-name: letter12; animation-duration: 2.6625s; animation-delay: 0.29s; animation-fill-mode: forwards; } @keyframes letter12 { from { margin-top: -525px; } to { margin-top: 45px; } } .letter:nth-child(13):before { content: "cqikomsoczreepoaia"; margin-top: -525px; animation-name: letter13; animation-duration: 0.6625s; animation-delay: 0.29s; animation-fill-mode: forwards; } @keyframes letter13 { from { margin-top: -525px; } to { margin-top: 45px; } } .letter:nth-child(14):before { content: "cqikomsoczreepoaia"; margin-top: -525px; animation-name: letter14; animation-duration: 1.6625s; animation-delay: 0.29s; animation-fill-mode: forwards; } @keyframes letter14 { from { margin-top: -525px; } to { margin-top: 45px; } } .letter:nth-child(15):before { content: "cqikomsoczreepoaia"; margin-top: -525px; animation-name: letter15; animation-duration: 0.2625s; animation-delay: 0.29s; animation-fill-mode: forwards; } @keyframes letter15 { from { margin-top: -525px; } to { margin-top: 45px; } } .letter:nth-child(16):before { content: "cqikomsoczreepoaia"; margin-top: -525px; animation-name: letter16; animation-duration: 3.2625s; animation-delay: 0.29s; animation-fill-mode: forwards; } @keyframes letter16 { from { margin-top: -525px; } to { margin-top: 45px; } } .letter:nth-child(17):before { content: "cqikomsoczreepoaia"; margin-top: -525px; animation-name: letter17; animation-duration: 2.2625s; animation-delay: 0.29s; animation-fill-mode: forwards; } @keyframes letter17{ from { margin-top: -525px; } to { margin-top: 45px; } }
JAVASCRIPT
Expand for more options Login