这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战
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可以让动画延时播放，但是需要注意的是，如果动画是无限循环的，设置的延迟就不会再循环。
