不同浏览器的内核和前缀
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 | 又慢到快再到慢 | 更适合 |