CSS中的动画详解

Posted 2022-08-12 公众号_前端每日技巧

CSS动画

常见动画效果：

.warpper 
    animation: allIn 3s;

@keyframes allIn 
    from 
        width: 50px;
        opacity: 0;
    
    to 
        width: 100px;
        opacity: 1;
    

其中​​allIn​​是自己定义的动画名称，​​3s​​是动画执行的时间，​​animation​​是调用自定义动画规则的CSS属性，​​@keyframe​​用来定义动画的关键帧。动画效果的组成离不开动画名称、动画时间、animation属性和@keyframes规则。除此之外还有动画次数、动画顺序的控制等，但是这些元素都不是必需的。

animation属性是多个css属性的缩写，包括​​animation-name​​、​​animation-duration​​、​​animation-timing-function​​、​​animation-delay​​、​​animation-iteration-count​​、​​animation-direction​​、​​anitation-fill-mode​​、和​​animation-play-state​​。animation属性支持同时多个应用动画规则，可以实现元素淡出和右侧划入同时进行的动画效果。不推荐将所有的动画卸载一个动画规则中，可以设置分割多个独立的动画规则。

​​@keyframes​​记住中重要的是后面带​​s​​，很多人写的时候忘记了​​s​​结尾，一个动画需要设置名称和定义关键帧列表，每个关键帧由关键帧选择器和对应的css样式共同组成的。其中关键帧选择器用来制定当前关键帧在整个动画过程中的位置，而且支持​​from​​和​​to​​两个关键字和百分比值。​​from​​的关键字等同于​​0%​​，​​to​​关键字等同于​​100%​​。

​​@keyframes​​起止关键帧可以不设置，关键帧列表可以合并在一起书写，不同关键帧选择器是不分先后顺序的，关键帧如果重复定义，则不同的css样式是进行累加的，而相同的css样式是后面的样式覆盖前面的样式，这个和普通的css选择器的样式计算规则是一样的。不需要在​​@keyframes​​规则语句中使用​​!important​​提高权重，因为当css执行动画的时候，关键帧中定义的css优先级就是最高的，所以​​!important​​会失效。

动画命名的名称可以有两种数据类型​​<custom-ident>​​和​​<string>​​, 其中​​<string>​​数据类型需要带引号的字符串，​​<custom-ident>​​数据类型的语法和css的标识符相似，区别就在于​​<custom-ident>​​数据类型是区分大小写的，可以由任意字母、数字、短横线、下划线、转移字符、Unicode字符组成。​​<custom-ident>​​不能是css属性本身支持的关键字，不能是十进制数字开头，可以使用短横线作为开头，但是短横线后面不能是十进制数字，除短横线和下划线之外的英文标点包括空格都需要转义。

​​animation-delay​​可以让动画延时播放，但是需要注意的是，如果动画是无限循环的，设置的延迟就不会再循环。

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​​和​​alternat​​e关键字的区别是让动画反向播放的轮数不同，从效果上看，​​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动画暂停。