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秒后启动？从第二个到第七个，只需显示包裹DIV（蓝色背景）。

小提琴看起来像这样： CSS Animation

Answer 1

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

动画延迟：它可以帮助您解决7秒后启动动画的基本问题。
的动画迭代计数;此属性允许您决定动画重复的次数。将其设置为1会将其限制为单个动画实例。

动画填充模式：将此属性设置为转发将确保动画结束时宽度保持为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/
处查看小提琴

Answer 2

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

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

Answer 3

使用animation-delay属性：

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

Answer 4

有一个属性animation-delay

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

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

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

Answer 5

通过多次尝试，我发现了一种简单/明智的方法来实现这一目标：

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

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

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

：-）

CSS动画在一定时间后开始

5 个答案: