css3动画 方向设置 |css代码检查工具

/* 方向设置 */
/* 默认是normal */
animation-direction: normal;
/* 逆向播放 */
animation-direction: reverse;
/* 往返播放 */
animation-direction: alternate;
/* 往返播放，逆向开始 */
animation-direction: alternate-reverse;

方向设置的默认值是normal。接下来，大家来看看其他三种方向设置的详细描述。

1. 逆向播放

如果设置animation-direction: reverse，动画将倒播。在逆向播放中，动画将从最后一帧开始，一直播放到第一帧结束。

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

2. 往返播放

如果设置animation-direction: alternate，动画将循环播放，但是每次播放都会反向播放。也就是说，假如第一次是正向播放，第二次就会逆向播放。

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

3. 往返播放，逆向开始

如果设置animation-direction: alternate-reverse，动画将循环播放，但是每次播放都会反向播放，而且每次播放都从逆向开始。也就是说，第一次播放是逆向开始，第二次就是正向开始。

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

方向设置对于动画的展示效果非常重要。通过CSS3提供的方向设置方式，大家可以轻松地实现各种酷炫的动画效果。