仅使用 CSS 延迟动画

Question

我有以下代码，它用 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>

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

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 delay in repeating

您尝试的是某种垂直旋转木马。仅查找 CSS 个轮播。以下是一个示例，您可以将其重新用于滑动文本。您需要调整动画 slideMe 以更改暂停时间。点击 'Full page' 看得更清楚。

代码笔演示：

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

仅使用 CSS 延迟动画

Delay Animation with CSS only

css

animation

transform

keyframe

css-animations

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

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