【前端Talking】CSS系列-一步步带你认识动画动画效果

0，写在前端CSS系列-一步步带你认识过渡效果这篇文章我讲解了transitiontransitionindetail用法，可以实现比较友好的过渡效果，但是功能比较有限。如果想要实现更漂亮的动画效果，我们今天就需要邀请主角动画出场。首先我们看一下动画的属性：属性说明css@keyframes指定animation3animation的所有动画属性的简写，除了animation-play-state属性3animation-name指定@keyframes动画3animation的名称-duration指定动画完成一个循环的时间，默认为03animation-timing-function指定动画的速度曲线，默认为ease3animation-iteration-count指定动画播放的次数，默认为13animation-direction指定动画是否在下一个循环中反向播放3animation-play-state指定动画是运行还是暂停，默认是running3animation-fill-modestate3超出动画时间。哇~~~，这么多，你到底在说什么，算了，不看了！稍等，本文将结合实例对每个属性进行讲解，形象生动，通俗易懂。不相信？如果您不相信我，请继续观看。1.浏览器支持在CanIuse网站可以查看目前只有IE10及以上版本支持动画属性。InternetExplorer10、Firefox和Opera支持动画属性。Safari和Chrome支持替代的-webkit-animation属性。为了节省篇幅，在本文中，浏览器将在所有示例中被省略。2.CSSAnimation属性详解2.1动画要使用动画，需要指定动画的名称和动画的持续时间来完成一个循环。animation是一个复合属性，具有以下属性：animation:||<动画持续时间>||<动画计时函数>||<动画延迟>||<动画迭代次数>||]*可以单独写每个属性，也可以直接使用动画复合属性。一般使用复合属性可以减少代码量，何乐而不为呢？下面结合实例详细介绍动画各个属性的作用和用法。2.2如何写@keyframes@keyframes关键字可以用来定义动画的各个状态。基本写法如下：@keyframesrainbow{0%{background-color:#cd0000;}50%{背景颜色：深粉色；}100%{背景颜色：蓝色；}}其中，rainbow为动画名称。同时，我们也可以用from代替0%，用to代替100%，所以上面的写法等同于：@keyframesrainbow{from{background-color:#cd0000;}50%{背景色：深粉色；}到{背景颜色：蓝色；}}2.3animation-nameusage:animation-name:none|名称[，无|姓名]*;指定紧跟在@keyframes后面的动画名称，加载css时会应用@keyframes规则的名称来实现动画。默认值为none，此时没有动画效果。2.4animation-duration用法：animation-duration:[,]*指定动画持续时间，默认为0，表示不动画，单位可以设置为ms或s。如果省略持续时间，则不允许播放动画，因为默认值为0。