這一節(jié)是不是講錯(cuò)了

animation-direction的屬性中，alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。這句話說反了吧？應(yīng)該是”播放次數(shù)是奇數(shù)時(shí)，動(dòng)畫向原方向播放；播放次數(shù)是偶數(shù)時(shí)，動(dòng)畫向反方向播放“大家覺得呢

天窗的螞蟻

2016-01-09

源自：十天精通CSS3 9-7

關(guān)注問題我要回答

959

操作

收起

4 回答

神影天初
2018-08-18

用腦殼想一想大家都知道是錯(cuò)的，畢竟第一次它就是正向的，第二次才是反向的，明顯寫錯(cuò)了而已。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

幕布斯9080258
2016-08-05

這里的奇數(shù)次不妨理解為奇數(shù)遍，就是播放第135遍的時(shí)候正方向

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

陳華東
2016-02-11

<--這段代碼你運(yùn)行一下,看到效果你就理解了!-->
<!DOCTYPE?html>
<html>
<head>
<style>?
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst?5s?infinite;
animation-direction:alternate;

/*?Safari?and?Chrome?*/
-webkit-animation:myfirst?5s?infinite;
-webkit-animation-direction:alternate;
}

@keyframes?myfirst
{
0%???{background:red;?left:0px;?top:0px;}
25%??{background:yellow;?left:200px;?top:0px;}
50%??{background:blue;?left:200px;?top:200px;}
75%??{background:green;?left:0px;?top:200px;}
100%?{background:red;?left:0px;?top:0px;}
}

@-webkit-keyframes?myfirst?/*?Safari?and?Chrome?*/
{
0%???{background:red;?left:0px;?top:0px;}
25%??{background:yellow;?left:200px;?top:0px;}
50%??{background:blue;?left:200px;?top:200px;}
75%??{background:green;?left:0px;?top:200px;}
100%?{background:red;?left:0px;?top:0px;}
}
</style>
</head>
<body>

<p><strong>注釋：</strong>Internet?Explorer?9?以及更早的版本不支持?animation-direction?屬性。</p>

<div></div>

</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答