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效果是一样的,都是由慢到快再到慢;
上一篇: python3文件的修改实现类似shell中sed的功能实例代码
下一篇: Python学习资料