仅使用 CSS 延迟 Animation

Question

我有以下代码使用 CSS animation 旋转单词。 我试图弄清楚如何在每个单词上暂停 animation，然后再转到下一个单词。 我试过使用animation-delay ，但这仅适用于 animation 的开始，而不是每个项目。

如何为每个单词暂停 animation？

 .im { float: left; margin-right: 0.3em; }.im-wrapper { display: flex; height: 1.1em; }.im-items { overflow: hidden; }.im-item { display: block; height: 100%; color: $primary; animation: move 10s infinite; animation-delay: 1s; white-space: nowrap; } @keyframes move { 0% { transform: translateY(0%); } 20% { transform: translateY(-100%); } 40% { transform: translateY(-200%); } 60% { transform: translateY(-300%); } 80% { transform: translateY(-400%); } 100% { transform: translateY(0%); } }

 <div class="hero-top-title"> <div style="display: inline-block;"> <div>Hi</div> </div>, I'm <div style="display: inline-block;"> <div>A Person</div> </div>. <br> <div class="im">Am I a</div> <div class="im-wrapper"> <div class="im-items"> <div class="im-item im-item1">Father</div> <div class="im-item im-item2">Mother</div> <div class="im-item im-item3">Brother</div> <div class="im-item im-item4">Sister</div> <div class="im-item im-item5">Grandma</div> </div> <div>?</div> </div> </div>

如何为每个单词暂停 animation？

Answer 1

需要保持相同的转换瞬间然后触发下一个。 请按照下面的代码，你会明白我的意思。

 .im { float: left; margin-right: 0.3em; }.im-wrapper { display: flex; height: 1.1em; }.im-items { overflow: hidden; }.im-item { display: block; height: 100%; color: $primary; animation: move 10s infinite; animation-delay: 1s; white-space: nowrap; } /* Here is the different */ @keyframes move { 0% { transform: translateY(0%); } 10% { transform: translateY(-100%); } 20% { transform: translateY(-100%); } 30% { transform: translateY(-200%); } 40% { transform: translateY(-200%); } 50% { transform: translateY(-300%); } 60% { transform: translateY(-300%); } 70% { transform: translateY(-400%); } 80% { transform: translateY(-400%); } 90% { transform: translateY(0%); } 100% { transform: translateY(0%); } }

 <div class="hero-top-title"> <div style="display: inline-block;"> <div>Hi</div> </div>, I'm <div style="display: inline-block;"> <div>A Person</div> </div>. <br> <div class="im">Am I a</div> <div class="im-wrapper"> <div class="im-items"> <div class="im-item im-item1">Father</div> <div class="im-item im-item2">Mother</div> <div class="im-item im-item3">Brother</div> <div class="im-item im-item4">Sister</div> <div class="im-item im-item5">Grandma</div> </div> <div>?</div> </div> </div>

Answer 2

延迟仅在开始时起作用。 因此不适用于多次迭代。 您需要像 Feroz 建议的那样添加空白帧。
这是关于同一主题的线程： CSS animation 重复延迟

---

您正在尝试的是某种垂直旋转木马。 仅查找 CSS 轮播。 以下是一个示例，您可以将其重新用于滑动文本。 您需要调整 animation slideMe来更改暂停时间。 单击“整页”以更好地查看。

一个codepen演示：

 <iframe height="400px" style="width: 100%;" scrolling="no" title="CSS only - A scalable auto sliding carousel -vertical" src="https://codepen.io/onkarruikar/embed/RwZzrMp?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/onkarruikar/pen/RwZzrMp"> CSS only - A scalable auto sliding carousel -vertical</a> by OnkarRuikar (<a href="https://codepen.io/onkarruikar">@onkarruikar</a>) on <a href="https://codepen.io">CodePen</a>. </iframe>