Animation 如何延迟在特定时间后开始的css动画

我正在css动画中使用steps（）。现在我想在特定时间后开始css动画。下面是一个例子

   @-webkit-keyframes typing {
    from { width: 0 }
    to { width:455px; }
}

@-moz-keyframes typing {
    from { width: 0 }
    to { width:16.3em }
}

@-webkit-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}
@-moz-keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: black }
}
.typing_animation h3 {
position: absolute;
font-size: 36px;
width:455px;
left: 0;
top:110px;
font-style: italic;
display: inline-block;
margin-left: -48px;
letter-spacing: 4px;
white-space: nowrap;
overflow: hidden;
    border-right: 1px solid #000;
     -webkit-animation: typing 10s steps(25, end), blink-caret 1s step-end infinite;
     -moz-animation: typing 10s steps(25, end), blink-caret 1s step-end infinite;
}

上面的一个结果是一个很酷的打字动画。然而，它马上就开始了。我想保持打字，并在延迟5秒后开始

谢谢

PS:A如果有用

请尝试以下属性：

-webkit-animation-delay: 5s; 
animation-delay: 5s;

---

注意：将此添加到h3规则的末尾

可能已经晚了，但这正是您需要的：

将元素宽度从“455px”更改为“0”

然后将“动画填充模式：前进”添加到你的。键入_animation h3“类，这样css规则强制动画可以更改宽度

添加所需的延迟，如下所示：“动画延迟：3s”

注意：不要忘记前缀，如果在一个元素上使用多个动画，最好使用速记动画属性

这是一个例子：

---

您可以使用setTimeout函数并向特定元素添加类

setTimeout（函数（）{
$（'p'）.addClass（'text-show'））
}, 3000);
p
{
字体大小：60px；
}
.文字节目
{
动画：textshow 2向前放松；
}
@关键帧文本显示{
0% {
变换：scale3d（0.6,0.6,0.6）；
不透明度：0；
}
100% {
变换：scale3d（1,1,1）；
不透明度：1；
}
}

我们设计。
谢谢。我做到了&它起作用了。但在动画（键入）开始之前，它应该保持不可见。对不起，我的问题有点模糊。更新小提琴
/* typing animation */
@keyframes typing {from {width: 0} to {width:19em}}
@-webkit-keyframes typing {from {width: 0} to {width:19em}}
@-moz-keyframes typing {from {width: 0} to {width:19em}}

/* blinking animation */
@keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
@-webkit-keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
@-moz-keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}

.my-animation {
width: 0;
overflow: hidden;
white-space:nowrap;
border-right: 0.1em solid #000000;
animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
-webkit-animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
-moz-animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
}