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

我在我的css动画中使用了steps（）。现在我想在特定时间后开始css动画。下面是一个例子。如何推迟应该在特定时间后开始的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的情况下，这是非常有用的

来源

2014-10-18 KBD

尝试animation-delay属性：

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

注：添加到您的H3统治结束

来源

2014-10-18 15:30:38

谢谢。我做了它的工作。但在动画（打字）开始之前，它应该保持不可见。对不起，我的问题有点含糊。更新小提琴http://jsfiddle.net/klmnweb/x0q7casz/2/ – KBD 2014-10-18 15:38:13

也许它晚了，但这是你需要的：

将元素宽度从“455px”更改为“0”;
然后在你的“.typing_animation h3”类中添加“animation-fill-mode：forwards”，这样这个css规则强制动画可以改变宽度;
添加您所需的延迟，如下所示：“animation-delay：3s”。

注意：不要忘记前缀，如果您在元素上使用多个动画，最好使用速记动画属性。 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; 
}

来源

2015-04-21 23:51:13 Pooria

你可以使用setTimeout函数并添加类的特定元素

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

p 
 
{ 
 
    font-size:60px; 
 
} 
 

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

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

感谢， Jomin乔治·保罗

来源

2016-07-29 06:52:38

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

回答

相关问题