<body>
<div class="box">
Rotating Word Animation
<div class="word">
<span>Rotating</span>
<span>Text </span>
<span>Test </span>
<span>Please</span>
<span>Work </span>


</div>
</div>
</body>
body
{
margin:0;
padding:0;
background:#ff5544;
}

.box
{
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 3em;
margin-left: 50px
width: calc(100%-50px);
}

.word
{
display: inline-block;
color: #ff0
}

.word span
{
position: absolute;
top: 0;
overflow: hidden;
animation: animate 10s linear infinite;
opacity: 0;
}

@keyframes animate
{
0%
{ 
opacity: 0;
transform: translateY(-50px);
}

2%
{ 
opacity: 1;
transform: translateY(0px);
}

18%
{ 
opacity: 1;
transform: translateY(0px);
}

20%
{ 
opacity: 0;
transform: translateY(50px);
}

100%
{ 
opacity: 0;
transform: translateY(50px);
}

}

.word span:nth-child(1)
{
animation-delay: 0s;
}

.word span:nth-child(2)
{
animation-delay: 2s;
}

.word span:nth-child(3)
{
animation-delay: 4s;
}

.word span:nth-child(4)
{
animation-delay: 6s;
}

.word span:nth-child(5)
{
animation-delay: 8s;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.