Question

我在我的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：如果有用的话，Fiddle

Answer 1

也许已经很晚了，但这就是你需要的：

从＆＃34; 455px＆＃34;更改元素宽度到＆＃34; 0＆＃34; ;
然后添加＆＃34;动画填充模式：转发＆＃34;进入你的＆＃34; .typing_animation h3＆＃34; class，所以这个css规则强制动画可以改变宽度;
像这样添加你想要的延迟：＆＃34;动画延迟：3s＆＃34;。

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

这是一个例子：jsfiddle

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

Answer 2

尝试animation-delay属性：

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

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

Answer 3

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

＆＃13;

setTimeout(function(){ 
$('p').addClass('text-show')  
}, 3000);

＆＃13;

p
{
  font-size:60px;
}

.text-show
{
	animation: textshow 2s ease-out forwards;
}
@keyframes textshow {
	0% {
		transform: scale3d(0.6, 0.6, 0.6);
		opacity: 0;
	}
	100% {
		transform: scale3d(1, 1, 1);
		opacity: 1;
	}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>We Design.</p>

＆＃13;

感谢， Jomin George paul

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

3 个答案: