欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML前端开发之路--Animation_html/css_WEB-ITnose

程序员文章站 2022-04-24 09:49:47
...
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效果是一样的,都是由慢到快再到慢;