本文详细介绍了CSS3动画的相关属性，包括animation-name、animation-duration、animation-timing-function等，并探讨了如何通过@keyframes定义关键帧。同时，文章提到了针对浏览器的前缀使用，如-webkit-、-moz-等。最后，文章还讨论了CSS3动画的优化策略，特别是will-change属性的使用，以及其对性能提升的作用。
不同浏览器的内核和前缀
Chrome(谷歌浏览器) ：WebKit内核 -webkit-
Safari(苹果浏览器) ： WebKit内核 -webkit-
Firefox(火狐浏览器) ： Gecko内核 -moz-
Opera(欧朋浏览器) ： Presto内核 -o-
IE(IE浏览器) ： Trident内核 -ms-
1.CSS3动画
兼容：IE10+ ，Firefox16+，Chrome43+，Safari69+，Opera30+ Android（-webkit-）
animation-name和animation-duration 是动画最基础属性，缺一个就不能实现效果
1.1 animation-name(动画的名称)
animation-name:设置动画的名称\none/*没有动画*/;
配合@keyframes 使用，起到调用作用.
1.2 animation-duration(动画播放时间)
语法
animation-duration:m/*秒*/sm/*毫秒*/0/*默认值*/;
1.3 animation-timing-function（动画类型）
| 值 | 意 | - |
|---|---|---|
| linear | 线性过渡（匀速运动） | 相对不错 |
| ease | 平滑过渡（慢加速，速度越快增加越慢） | 结束生硬 |
| ease-in | 由慢到快 | 结束生硬 |
| ease-out | 又快到慢 | |
| ease-in-out | 又慢到快再到慢 | 更适合 |
最低0.47元/天 解锁文章
3988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
