I have simple CS3 animation which is flipping three words vertically.
Now my animation is not very smooth like you can see in my code. Is there any option on how to make it more smooth? Mainly the first text element is not showing smooth. I already tried ease-in-out but it's not better. Also tried changing the percentage of animations but that was only worse and worse.
MY HTML AND CSS CODE:
body {
background: #000;
}
h1 {
font-weight: 900;
font-style: italic;
font-size: 5em;
text-transform: uppercase;
text-align: center;
padding: 40px 0;
color: rgba(255, 255, 255, 1);
}
#flip {
height: 80px;
margin-left: 16px;
overflow: hidden;
}
#flip .flip-wrapper {
display: flex;
}
#flip>div>div {
padding: 4px 12px;
height: 45px;
margin-bottom: 45px;
color: #fff;
display: inline-block;
}
#flip .flip-container {
animation: show 5s linear infinite;
}
@keyframes show {
0% {
margin-top: -260px;
}
5% {
margin-top: -190px;
}
33% {
margin-top: -190px;
}
38% {
margin-top: -100px;
}
66% {
margin-top: -100px;
}
71% {
margin-top: -10px;
}
99.99% {
margin-top: -10px;
}
100% {
margin-top: -260px;
}
}
<h1>
Digital content
<span>
that
<div id=flip>
<div class="flip-container">
<div class="flip-wrapper"><div>works</div></div>
<div class="flip-wrapper"><div>earns</div></div>
<div class="flip-wrapper"><div>tellth</div></div>
</div>
</div>
</span>
</h1>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…