在CSS動畫中,有時候我們需要倒播動畫。這種情況下,我們可以使用CSS3的animation-direction
屬性。這個屬性決定了動畫播放的方向,包括正序、倒序和交替播放。
/* 正序播放動畫 */ animation-direction: normal; /* 倒序播放動畫 */ animation-direction: reverse; /* 交替播放動畫 */ animation-direction: alternate;
如果想要倒播動畫,只需要將animation-direction
屬性設置為reverse
即可。下面是一個例子:
.box { width: 100px; height: 100px; background-color: red; animation: myanimation 2s forwards; animation-direction: reverse; } @keyframes myanimation { 0% { transform: scale(1); } 100% { transform: scale(0.5); } }
這段代碼會讓一個紅色的正方形以2秒的時間從原始大小縮小到一半,然后倒播動畫使其重新變回原始大小。
當然,如果想要交替播放動畫,只需要將animation-direction
屬性設置為alternate
。這個屬性值會在正序和倒序之間切換播放。
總的來說,CSS3的animation-direction
屬性提供了很多方便的選項,可以滿足我們在動畫制作中的各種需求。