html - 如何修复 "Text Animation"？

Question

如何修复此动画 CSS Animation ？我想将文本动画与段落对齐。 另外，我不确定我是否使用了正确的方法来做到这一点。如果您知道另一个更简单的解决方案，请教我。 如果可能的话，我想只用 CSS 制作这种类型的动画。

谢谢!

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>

Answer 1

您可以使用 em 值和行内 block 元素行为来将您的框放在文本和坐标位置旁边:

示例 使用 alternate 以避免在每次重新启动 animation 时跳转。

span {
  display: inline-block;
  vertical-align: -0.275em;
  /*reset box from the baseline */
  text-align: center;
  /* whatever*/
  height: 1.2em;
  /* average line-height*/
  overflow: hidden;
  /* don't let it grow*/
}

span span {
  display: block;
  /* stack pieces of text */
  background: yellow;
  margin-bottom: 0.2em;
  padding:0 0.2em;
}

span span:first-of-type {
  margin-top: -4.2em;
  /* 1.2em + 0.2em * 3 to climb up 3 boxes */
  animation: slide 8s alternate infinite;
}
span ~ span span {
background:tomato
}
span ~ span span:first-of-type {
  animation-delay:-4s;

}

@keyframes slide {
  /* 4 steps for 4 lines */
  0%,
  20% {
    margin-top: -4.2em;
  }
  25%,
  50% {
    margin-top: -2.8em;
  }
  55%,
  70% {
    margin-top: -1.4em;
  }
  75%,
  100% {
    margin-top: 0;
  }
}

p + p {font-size: 2.5em;}

<p> let's have <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> to tell or is that only <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> after all .</p>
<p> let's have <span> <span>text</span> <span>words</span> <span>stories</span> <span>something</span> </span> to tell or is that only <span> <span>text</span> <span>words</span> <span>stories</span> <span>CSS</span> </span> after all .</p>