CSS3 動(dòng)畫逆向播放是指在運(yùn)行到規(guī)定的末狀態(tài)后，動(dòng)畫反轉(zhuǎn)并回到初始狀態(tài)。可以使用CSS3動(dòng)畫的animation屬性實(shí)現(xiàn)此效果。

/* 定義keyframes關(guān)鍵字 */
@keyframes reverse {
/* 定義兩個(gè)關(guān)鍵幀 */
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
/* 定義動(dòng)畫屬性 */
.animation {
animation-name: reverse; /* 指定keyframes */
animation-duration: 1s; /* 設(shè)置動(dòng)畫間隔時(shí)間 */
animation-timing-function: ease-in-out; /* 設(shè)置動(dòng)畫速度曲線 */
animation-iteration-count: 1; /* 定義播放次數(shù) */
animation-direction: alternate-reverse; /* 設(shè)置播放方向 */
}

在上述代碼中，我們先定義了一個(gè)名為reverse的關(guān)鍵幀，包含了兩個(gè)關(guān)鍵幀。接著在動(dòng)畫屬性中指定了keyframes、duration、timing-function、iteration-count以及direction等參數(shù)。

其中，animation-direction參數(shù)設(shè)置為alternate-reverse，即每次循環(huán)動(dòng)畫都會(huì)反轉(zhuǎn)方向。而animation-iteration-count參數(shù)設(shè)置為1，則表示動(dòng)畫只播放一次。

最終，添加動(dòng)畫效果的元素只需添加類名animation，便可以觸發(fā)動(dòng)畫逆向播放的效果。