CSS动画在一定时间后开始播放 [英] CSS animation starts after certain amount of time

问题描述

我已经尝试解决这个问题已经有一段时间了，不过到目前为止还没有成功：我想使用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(蓝色背景)。

小提琴如下所示： CSS Animation

推荐答案

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

1. 动画延迟：帮助您解决7秒后开始动画的基本问题。
2. animation-iteration-count；此属性允许您决定动画自身重复的次数。将其设置为1会将其限制为单个动画实例。
3. 动画填充模式：将此属性设置为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/

查看小提琴

这篇关于CSS动画在一定时间后开始播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！