CSS动画在一定时间后开始答案

【问题标题】：CSS animation starts after certain amount of timeCSS动画在一定时间后开始
【发布时间】：2023-04-04 11:12:01
【问题描述】：

我一直在尝试解决这个问题，但到目前为止没有成功：我想使用 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

【问题讨论】：

标签： html css animation css-animations

【解决方案1】：

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

animation-delay：帮助您解决7秒后开始动画的基本问题。
动画迭代计数；此属性可让您决定动画自身重复的次数。将其设置为 1 会将其限制为单个动画实例。
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/查看小提琴

【讨论】：

有没有办法为 Firefox 解决这个问题？
@-moz 关键帧在 firefox 中缺少 to 属性。

【解决方案2】：

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

您可以在一定时间后开始动画
元素将被隐藏，直到动画开始。

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

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

:-)

【讨论】：

【解决方案3】：

你需要像这样使用animation-delay：

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

【讨论】：

有趣的是这种方法仍然会显示从第二个 1 到 7 的文本，并重置以进行重写。在动画开始之前我不希望显示任何内容 - 除了包装器

【解决方案4】：

使用animation-delay 属性：

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

【讨论】：

【解决方案5】：

有一个属性animation-delay

将此属性提供给您的类元素。

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

http://codepen.io/anon/pen/dNqmvB

【讨论】：