CSS中的CSS动画(二)

这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战

reverse和alternate

animation-direction属性可以用来控制动画的方向，意思就是通过控制@keyframes规则中定义的动画关键帧执行的方向来实现的。默认值为normal，还有reverse、alternate、alternate-reverse,其中reverse是让每一轮动画执行方向相反，alternate是让下一轮动画的执行方向和上一轮动画的执行方向相反。

.wrapper {
    //animation动画执行了3次
    animation allOut 2s 3;
}
@keyframes allOut {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

如果animation-direction的属性值为normal，那么执行动画的方向是0%到100%、0%到100%,每一轮动画的方向都是正常的。如果animation-direction的属性值为reverse，那么执行动画的方向是100%到0%、100%到0%，每一轮动画方向都是相反的。如果animation-direction的属性值是alternate，那么执行动画的方向是0%到100%、100%到0%，每3n+1轮的动画方向是相反的。如果animation-direction的属性值是alternate-reverse，那么动画执行的方向是100%到0%、0%到100%，每3n轮的动画方向是相反的。

通过上面我们可以得出，reverse和alternate关键字的区别是让动画反向播放的轮数不同，从效果上看，alternate关键字的动画效果表现为来回交替播放。reverse可以用于图形的顺时针旋转或者图形的逆时针旋转。alternate可以用于实现钟摆运动一类的动画效果。

alternate-reverse关键字的作用是让动画第一次反向播放，然后来回不断播放，alternate-reverse关键字不能写作reverse-alternate。

animation-iternation-count属性可以任意制定动画的次数，可以为小数。但是小数的应用场景很少。

infinite表示无限，作用是让动画可以无限循环播放，可以用于加载动画，钟摆运动等效果。

animation-iteration-count的属性值不能是负值，但是可以为0，表示动画一次也不播放。

forward和backwards

forwards表示前进的意思，表示动画结束后，元素将应用当前动画结束时的属性值，而什么时候结束取决于animation-iteration-count属性。

.wrapper {
    opacity: .3;
    animation: allOut 3s 2s forwards;
}
@keyframes allOut {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

wrapper元素透明度会从0到1,变化过程：

1、过程是透明度从0.3保持2s。

2、透明度从0.3突然到0，然后透明度从0过渡到1，持续3s。

3、透明度一致保持为1。

backwards表示后退的意思，表示动画开始之前，元素将应用当前动画第一轮播放的第一帧的属性值。backwards取决于animation-direction属性值。

css中的动画是可以暂停和重启的。使用animation-play-state属性可以控制css动画的播放和暂停，其中running表示播放，paused表示暂停。只要设置animation-play-state为paused就可以让一个正在播放的css动画暂停。