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;
}
}