這一節是不是講錯了

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

天窗的螞蟻

2016-01-09

源自：十天精通CSS3 9-7

關注問題我要回答

962

操作

收起

4 回答

神影天初
2018-08-18

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

0 回復有任何疑惑可以回復我~

收起回答

幕布斯9080258
2016-08-05

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

0 回復有任何疑惑可以回復我~

收起回答

陳華東
2016-02-11

<--這段代碼你運行一下,看到效果你就理解了!-->
<!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 回復有任何疑惑可以回復我~

收起回答