前面的话
transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的；而animation则是通过关键帧@keyframes来实现更为复杂的动画效果。本文将介绍关于animation动画的相关知识
定义
和transition类似，animation也是一个复合属性，包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode共8个子属性
[注意]IE9-不支持；safari4-8、IOS3.2-8.4、android2.1-4.4.4需要添加-webkit-前缀
animation-name: 动画名称(默认值为none)animation-duration: 持续时间(默认值为0)animation-timing-function: 时间函数(默认值为ease)animation-delay: 延迟时间(默认值为0)animation-iteration-count: 循环次数(默认值为1)animation-direction: 动画方向(默认值为normal)animation-play-state: 播放状态(默认值为running)animation-fill-mode: 填充模式(默认值为none)
div{ width: 300px; height: 100px; background-color: pink; animation-name: test; animation-duration: 3s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-play-state: running; animation-fill-mode: none;}/* 关于keyframes关键帧的内容稍后介绍 */@keyframes test{ 0%{background-color: lightblue;} 30%{background-color: lightgreen;} 60%{background-color: lightgray;} 100%{background-color: black;}}
关键帧
animation制作动画效果需要两步，首先用关键帧声明动画，再用animation调用动画
关键帧的语法是以@keyframes开头，后面紧跟着动画名称animation-name。from等同于0%，to等同于100%。百分比跟随的花括号里面的代码，代表此时对应的样式
@keyframes animation-name{ from | 0%{} n%{} to | 100%{}} 【1】百分比顺序不一定非要从0%到100%排列，最终浏览器会自动按照0%-100%的顺序进行解析
[注意]0%不可以省略百分号
@keyframes test{ 100%{background-color: black;} 60%{background-color: lightgray;} 30%{background-color: lightgreen;} 0%{background-color: lightblue;}}
div{ width: 300px; height: 100px; background-color: pink; animation-name: test; animation-duration: 3s; animation-iteration-count: infinite;} 【2】如果存在负百分数或高于100%的百分数，则该关键帧将被忽略
/* -20%和120%对应的代码无效*/@keyframes test{ -20%{background-color: red;} 0%{background-color: lightblue;} 30%{background-color: lightgreen;} 60%{background-color: lightgray;} 100%{background-color: black;} 120%{background-color: yellow;}} 【3】如果0%或100%不指定关键帧，将使用该元素默认的属性值
/* 0%和100%对应的颜色是默认值pink*/@keyframes test{ 30%{background-color: lightgreen;} 60%{background-color: lightgray;}} 【4】若存在多个@keyframes，浏览器只识别最后一个@keyframes里面的值
/* 后面覆盖前面 */@keyframes test{ 0%{background-color: lightblue;} 30%{background-color: lightgreen;} 60%{background-color: lightgray;} 100%{background-color: black;}}@keyframes test{ 0%{background-color: blue;} 30%{background-color: green;} 60%{background-color: gray;} 100%{background-color: black;}} 【5】空的keyframes规则是有效的，它们会覆盖前面有效的关键帧规则
/* 后面覆盖前面 */@keyframes test{ 0%{background-color: lightblue;} 30%{background-color: lightgreen;} 60%{background-color: lightgray;} 100%{background-color: black;}}@keyframes test{}
动画属性
动画名称
animation-name
值: none | [, ]*
初始值: none
应用于: 所有元素
继承性: 无
: none | 自定义动画名称
【1】如果多个动画试图修改相同的属性，那么动画列表的后面覆盖前面
/* animation-name的顺序是test1,test2，且它们修改的是同样的属性，后面覆盖前面，所以test2有效，test1无效 */div{ width: 300px; height: 100px; background-color: pink; animation-name: test1,test2; animation-duration: 3s; animation-iteration-count: infinite;}@keyframes test2{ 0%{background-color: blue;} 30%{background-color: green;} 60%{background-color: gray;} 100%{background-color: black;}}@keyframes test1{ 0%{background-color: lightblue;} 30%{background-color: lightgreen;} 60%{background-color: lightgray;} 100%{background-color: black;}} 【2】如果动画的其他7个子属性和动画名称的长度不同，动画名称列表的长度决定最终的长度，多余的值无余，缺少的值按照顺序进行重复
div{ width: 300px; height: 100px; position: relative; background-color: pink; animation-name: test1,test2,test3; animation-duration: 3s,1s; animation-iteration-count: infinite;}@keyframes test1{ 0%{background-color: lightblue;} 30%{background-color: lightgreen;} 60%{background-color: lightgray;} 100%{background-color: black;}}@keyframes test2{ 0%{font-size: 20px;} 30%{font-size: 30px;} 60%{font-size: 40px;} 100%{font-size: 50px;}}@keyframes test3{ 0%{left: 0px;} 30%{left: 30px;} 60%{left: 40px;} 100%{left: 50px;}}
测试文字
查看更多关于深入理解CSS动画animation_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111905