html - CSS 动画在一定时间后开始

Question

一段时间以来，我一直在努力解决这个问题，但到目前为止还没有成功:我想使用 CSS 运行打字动画。动画必须在 7 秒后开始。我不知道该怎么做。我的代码如下所示:

HTML

<div class='background-fullwidth'>    
    <div class="css-typing">
      This text will pop up using an typewriting effect
    </div>        
</div>

CSS

.css-typing  {
    width: 360px;

    white-space: nowrap;
    overflow: hidden;
    -webkit-animation: type 3s steps(50, end);
    animation: type 3s steps(55, end);
    -o-animation: type 5s steps(50, end);
    -moz-animation: type 3s steps(55, end);

    padding: 10px;
}

.background-fullwidth {
  width: 400px;
  background-color: rgba(0, 50, 92, 0.7);
}    

@keyframes type {
    from { width: 0; }
    to { width: 360px; }
}

@-moz-keyframes type {
    from { width: 0; }
    to { width: 360px; }
}

@-webkit-keyframes type {
    from { width: 0; }
    to { width: 360px; }
}

有谁知道如何添加这个计时器 - 假设动画必须在 7 秒后开始？从第 1 秒到第 7 秒，只需显示环绕 DIV(蓝色背景)。

Fiddle 看起来像这样: CSS Animation

Answer 1

您必须使用 3 种不同的动画属性。

1. animation-delay:帮助您解决7秒后开始动画的基本问题。
2. 动画迭代计数；此属性可让您决定动画自身重复的次数。将其设置为 1 会将其限制为单个动画实例。
3. animation-fill-mode:将此属性设置为 forward 将确保在动画结束时宽度保持为 320。

CSS

  animation-delay: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  width: 0; // So that the animation starts from 0

在 https://jsfiddle.net/kaminasw/at6mbxyr/ 查看 fiddle