animation-direction屬性如何使用

發(fā)布時(shí)間：2020-09-25 14:33:16 來(lái)源：億速云閱讀：216 作者：小新欄目：web開(kāi)發(fā)

這篇文章給大家分享的是有關(guān)animation-direction屬性如何使用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

animation-direction屬性是用來(lái)定義是否應(yīng)該輪流反向播放動(dòng)畫(huà)的；當(dāng)動(dòng)畫(huà)播放次數(shù)超過(guò)一次時(shí)，我們就可以通過(guò)設(shè)置animation-direction的值為alternate來(lái)實(shí)現(xiàn)動(dòng)畫(huà)輪流反向播放。

CSS3 animation-direction屬性

作用：定義是否應(yīng)該輪流反向播放動(dòng)畫(huà)。

語(yǔ)法：

animation-direction: normal|alternate;

normal：默認(rèn)值。動(dòng)畫(huà)應(yīng)該正常播放。

alternate：動(dòng)畫(huà)應(yīng)該輪流反向播放。

說(shuō)明： 如果 animation-direction 值是 "alternate"，則動(dòng)畫(huà)會(huì)在奇數(shù)次數(shù)（1、3、5 等等）正常播放，而在偶數(shù)次數(shù)（2、4、6 等等）向后播放。

注：如果把動(dòng)畫(huà)設(shè)置為只播放一次，則該屬性沒(méi)有效果。

CSS3 animation-direction屬性的使用示例

<!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>

<div></div>

</body>
</html>

效果圖：

animation-direction屬性如何使用

感謝各位的閱讀！關(guān)于animation-direction屬性如何使用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問(wèn)一下細(xì)節(jié)

animation-direction屬性如何使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽