CSS動畫是一種有趣且實用的技術，通過它可以實現各種互動效果。我們知道，CSS動畫可以正向播放，也可以反向播放。如何實現CSS動畫的反向播放呢？

/* 定義一個scale動畫，從1到2 */
@keyframes scale {
from {
transform: scale(1);
}
to {
transform: scale(2);
}
}
/* 定義一個類名zoom，應用scale動畫，動畫時間為2秒 */
.zoom {
animation-name: scale;
animation-duration: 2s;
}
/* 定義一個類名zoom-reverse，將scale動畫反向播放，并在結束時保持動畫的最終狀態 */
.zoom-reverse {
animation-name: scale;
animation-duration: 2s;
animation-direction: reverse;
animation-fill-mode: forwards;
}

如上所示，我們定義了一個scale動畫，從1到2。接著定義了一個類名zoom，它應用了scale動畫，動畫時間為2秒。

接下來，我們定義了一個類名zoom-reverse，它的作用是將scale動畫反向播放，并保持動畫的最終狀態。怎樣實現呢？只需設置animation-direction為reverse，animation-fill-mode為forwards即可。這里的animation-fill-mode是為了讓反向播放后保持動畫的最終狀態。

在使用過程中，只需要給需要應用反向播放的元素添加zoom-reverse類名即可。例如：

<div class="zoom"></div>
<div class="zoom zoom-reverse"></div>

第一個元素應用了正向播放的scale動畫，第二個元素應用了反向播放的scale動畫。

總之，CSS動畫的反向播放非常簡單，只需設置animation-direction為reverse即可。我們可以通過這種方式實現更多的交互效果，提升用戶體驗。