HTML前端开发之路--Animation_html/css

来源：动视网责编：小采时间：2020-11-27 16:37:11

HTML前端开发之路--Animation_html/css

HTML前端开发之路--Animation_html/css_WEB-ITnose:Animation和transition一样也是动画效果，但是transition只能控制动画开始的起始状态，而Animation可以设置关键帧去定义动画的过渡过程； Animation用@keyframes去自定义一个变化过程 {}内部包含着动画变化的关键帧例如： @-webkit-keyfram

推荐度：

点击下载本文 文档为doc格式

导读HTML前端开发之路--Animation_html/css_WEB-ITnose:Animation和transition一样也是动画效果，但是transition只能控制动画开始的起始状态，而Animation可以设置关键帧去定义动画的过渡过程； Animation用@keyframes去自定义一个变化过程 {}内部包含着动画变化的关键帧例如： @-webkit-keyfram

Animation和transition一样也是动画效果，但是transition只能控制动画开始的起始状态，而Animation可以设置关键帧去定义动画的过渡过程；

Animation用@keyframes去自定义一个变化过程 {}内部包含着动画变化的关键帧例如：

@-webkit-keyframes mycolor {
 0%{
 background-color: brown;
 }
 40%{
 background-color: aqua;
 }
 70%{
 background-color: #555555;
 }
 100%{
 background-color: brown;
 }
 }

然后再根据相应的动作触发动画过程，比如hover，active等，animation和transition一样有三个子属性值，property，duration和timing-function

另外提一下，timing-function有5个值，linear，ease，ease-in，ease-out，ease-in-out；

linear：匀速变化；

ease-in：由慢到快；

ease-out：由快到慢；

ease和ease-in-out效果是一样的，都是由慢到快再到慢；