CSS中的动画详解

来源：恒创科技编辑：恒创科技编辑部

2024-01-17 02:01:59

CSS中的动画详解_css

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和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;
    }
}