0
我有這段代碼。CSS3動畫延遲屬性不起作用
<!DOCTYPE html>
<html>
<head>
<title>Rollover Test</title>
<style>
#one {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 1110px;
top: 110px;
opacity: 1;
animation: myfirst 5s;
-webkit-animation: myfirst 5s;
}
@keyframes myfirst
{
from {opacity: 0; width: 50px; height: 0px;}
to {opacity: 1; width: 50px; height: 50px;}
}
@-webkit-keyframes myfirst
{
from {opacity: 0; width: 50px; height: 0px;}
to {opacity: 1; width: 50px; height: 50px;}
}
#two {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 1110px;
top: 200px;
opacity: 1;
animation: mysecond 5s;
animation-delay: 5s;
-webkit-animation: mysecond 5s;
-webkit=animation-delay: 5s;
}
@keyframes mysecond
{
from {opacity: 0; width: 50px; height: 0px;}
to {opacity: 1; width: 50px; height: 50px;}
}
@-webkit-keyframes mysecond
{
from {opacity: 0; width: 50px; height: 0px;}
to {opacity: 1; width: 50px; height: 50px;}
}
</style>
</head>
<body>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</body>
</html>
我不能讓mysecond
打two
,使用animation-delay
之前要等待5秒鐘。我基本上希望它是myfirst
播放,然後完成,mysecond
播放。我已經嘗試了animation: mysecond 5s;
和animation-delay: 5s;
的順序。
謝謝,但現在只有「myfirst」播放。 –
@ Mr.Shtuffs - 等待5秒鐘,它就會運行。看到這裏:http://jsfiddle.net/Xj6s2/ –
哦,我明白了,但問題是,我想''兩個''消失之前播放。 –