CSS3動(dòng)畫是Web開發(fā)中的重要組成部分。在CSS3動(dòng)畫中，我們可以使用關(guān)鍵幀（keyframes）設(shè)置動(dòng)畫的每一個(gè)階段，從而實(shí)現(xiàn)更加豐富的效果。而反向動(dòng)畫則是指元素從動(dòng)畫的最后一幀開始逆向播放，從而形成一種反向的效果。

要實(shí)現(xiàn)反向動(dòng)畫，我們可以通過設(shè)置動(dòng)畫的方向?qū)傩裕╝nimation-direction），將其設(shè)置為reverse。比如下面的代碼將會(huì)實(shí)現(xiàn)一個(gè)向右移動(dòng)的動(dòng)畫，然后在結(jié)束后會(huì)反向向左回到原點(diǎn)：

.box {
animation: move-right 2s linear forwards;
}
@keyframes move-right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
.box:hover {
animation-direction: reverse;
}

在上面的代碼中，我們通過設(shè)置animation-direction屬性，將動(dòng)畫的方向設(shè)置為reverse。當(dāng)鼠標(biāo)放到元素上時(shí)，動(dòng)畫就會(huì)反向播放，從而實(shí)現(xiàn)了一個(gè)反向動(dòng)畫。

除了設(shè)置animation-direction屬性外，我們還可以使用JavaScript控制動(dòng)畫的播放方向。比如下面的代碼將會(huì)實(shí)現(xiàn)一個(gè)點(diǎn)擊元素時(shí)切換動(dòng)畫方向的效果：

.box {
animation: move-right 2s linear forwards;
}
@keyframes move-right {
0% {
transform: translateX(0);
}
100% {
transform: translateX(200px);
}
}
document.querySelector('.box').onclick = function() {
this.style.animationDirection = this.style.animationDirection === 'reverse' ? 'normal' : 'reverse';
};

在上面的代碼中，當(dāng)我們點(diǎn)擊元素時(shí)，會(huì)切換元素的animationDirection屬性，從而實(shí)現(xiàn)動(dòng)畫方向的切換。