CSS3動(dòng)畫(huà)是前端開(kāi)發(fā)中的重要一環(huán)。在動(dòng)畫(huà)中，方向設(shè)置是非常關(guān)鍵的一個(gè)部分。在CSS3中，提供了豐富的方向設(shè)置方式，下面我們一起來(lái)看看。

/* 方向設(shè)置 */
/* 默認(rèn)是normal */
animation-direction: normal;
/* 逆向播放 */
animation-direction: reverse;
/* 往返播放 */
animation-direction: alternate;
/* 往返播放，逆向開(kāi)始 */
animation-direction: alternate-reverse;

方向設(shè)置的默認(rèn)值是normal。接下來(lái)，我們來(lái)看看其他三種方向設(shè)置的詳細(xì)描述。

1. 逆向播放

如果設(shè)置animation-direction: reverse，動(dòng)畫(huà)將倒播。在逆向播放中，動(dòng)畫(huà)將從最后一幀開(kāi)始，一直播放到第一幀結(jié)束。

div {
animation-name: myanimation;
animation-duration: 3s;
animation-direction: reverse;
}
@keyframes myanimation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

2. 往返播放

如果設(shè)置animation-direction: alternate，動(dòng)畫(huà)將循環(huán)播放，但是每次播放都會(huì)反向播放。也就是說(shuō)，假如第一次是正向播放，第二次就會(huì)逆向播放。

div {
animation-name: myanimation;
animation-duration: 3s;
animation-direction: alternate;
}
@keyframes myanimation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

3. 往返播放，逆向開(kāi)始

如果設(shè)置animation-direction: alternate-reverse，動(dòng)畫(huà)將循環(huán)播放，但是每次播放都會(huì)反向播放，而且每次播放都從逆向開(kāi)始。也就是說(shuō)，第一次播放是逆向開(kāi)始，第二次就是正向開(kāi)始。

div {
animation-name: myanimation;
animation-duration: 3s;
animation-direction: alternate-reverse;
}
@keyframes myanimation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}

方向設(shè)置對(duì)于動(dòng)畫(huà)的展示效果非常重要。通過(guò)CSS3提供的方向設(shè)置方式，我們可以輕松地實(shí)現(xiàn)各種酷炫的動(dòng)畫(huà)效果。