Could someone please help with fixing this CSS animation? I want to align the text animation to the paragraph properly. I'm not confident if I am approaching this in the correct way, so if there is a simpler solution out there, I would appreciate learning about it. My goal is to achieve this type of animation using only CSS, if that's feasible.
Thank you!
h1.entry-title, .blog h1.entry-title
{
font-family: 'Playfair Display', serif;
font-size: 51px;
line-height: 60px;
font-weight: 400;
color: #000;
margin: 0 auto;
padding-top: 0;
padding-bottom: 50px;
text-align: left;
}
.flip {
height:50px;
overflow:hidden;
display: inline-block;
padding-left: 10px;
}
.flip > div > div {
color:#000;
padding:4px 12px;
height:45px;
margin-bottom:45px;
display:inline-block;
}
.flip div:first-child {
animation: show 8s linear infinite;
}
.flip div div {
background:#fff701;
}
.flip div:first-child div {
background:#fff701;
}
.flip div:last-child div {
background:#fff701;
}
@keyframes show {
0% {margin-top:-270px;}
5% {margin-top:-180px;}
33% {margin-top:-180px;}
38% {margin-top:-90px;}
66% {margin-top:-90px;}
71% {margin-top:0px;}
99.99% {margin-top:0px;}
100% {margin-top:-270px;}
}<div id="content" class="site-content">
<div class="header-content content-1170 center-relative block">
<h1 class="entry-title">
You can’t wait for<div class=flip>
<div><div>succes,</div></div>
<div><div>money,</div></div>
<div><div>class,</div></div>
</div>
<br>
you have to go after it with a club.
</h1>
</div>