仅使用 CSS 延迟动画

Posted 2023-03-06

【中文标题】仅使用 CSS 延迟动画

【英文标题】：Delay Animation with CSS only

【发布时间】：2022-01-02 12:31:53

【问题描述】：

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

如何为每个单词暂停动画？

.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>

如何为每个单词暂停动画？

【参考方案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>

【讨论】：

谢谢，所以如果我想添加更长的延迟/暂停，我是否要继续添加更多关键帧点？

如果你只想使用 css。是的。

【参考方案2】：

延迟仅在开始时起作用。所以不适用于多次迭代。您需要像 Feroz 建议的那样添加空白帧。 这是一个关于同一主题的帖子：CSS animation delay in repeating

---

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

Codepen 演示：

<iframe  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>