Html CSS动画在一定时间后开始

我一直在试图弄明白这一点已经有一段时间了，但到目前为止还没有成功：我想用CSS运行一个打字动画。动画必须在7秒后开始。我不知道该怎么做。我的代码如下所示：

.css-typing {
    --other properties--
    -webkit-animation-delay: 7s; /* Safari 4.0 - 8.0 */
    animation-delay: 7s;
}

HTML

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

有人知道如何添加这个计时器吗？假设动画必须在7秒后开始？从第1秒到第7秒，只需显示包装DIV（蓝色背景）

小提琴看起来像这样：

---

您需要使用

动画延迟

来实现以下效果：

.css-typing {
    --other properties--
    -webkit-animation-delay: 7s; /* Safari 4.0 - 8.0 */
    animation-delay: 7s;
}

使用属性：

animation-delay: 2s;
-webkit-animation-delay: 2s;

---

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

动画延迟：它帮助您解决7秒后启动动画的基本问题

动画迭代计数；此属性允许您决定动画自身重复的次数。将其设置为1将限制为单个动画实例

动画填充模式：将此属性设置为“前进”将确保动画结束时宽度保持在320

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

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

---

在

处查看小提琴有一个属性动画延迟

为类元素提供此属性

检查以下示例动画在7秒后开始

---

通过几次试验，我发现了一种简单/聪明的方法来实现这一点：

您可以在特定时间后启动动画

元素将隐藏，直到动画开始

我的关键帧动画（可以是任何动画）：

@keyframes fadeUp{
    from{
    transform: translateY(100px);
    opacity: 0;
    }
    to{
    opacity: 1;
    }
}

然后我使用了如下动画：

h1{
animation: fadeUp 1.5s ease 7s backwards;    /*Waiting time of 7 seconds*/
}

h1{
animation-name: fadeUp;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 7s;    /*For X waiting time change the value to Xs*/
animation-fill-mode: backwards;
}

上述代码类似于：

h1{
animation: fadeUp 1.5s ease 7s backwards;    /*Waiting time of 7 seconds*/
}

h1{
animation-name: fadeUp;
animation-duration: 1.5s;
animation-timing-function: ease;
animation-delay: 7s;    /*For X waiting time change the value to Xs*/
animation-fill-mode: backwards;
}

---

：-）

有趣的是，这种方法仍然会显示从第1秒到第7秒的文本，并重置以进行重写。我不希望在动画开始之前显示任何内容-除了包装器-有没有办法修复firefox的此问题？@-firefox中的moz关键帧缺少to属性。