CSS3（动画）

不同浏览器的内核和前缀

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	又慢到快再到慢	更适合

语法

animation-timing-function:linear;

1.4 animation-delay（动画延迟）

语法

animation-delay:m/*秒*/sm/*毫秒*/0/*默认值*/;

负值会跳多对应的秒数

1.5 animation-iteration-count（动画循环次数）

语法

animation-iteration-count:数值次数\infinite/*无限次*/;/*默认值为1*/

1.6 animation-direction（是否反向运动）

animation-direction:normal;

值	意
normal	正常方向
reverse	反方向
alternate	先正后反，并交替运行（必须有2次以上的循环）
alternate-reverse	先反后正，并交替运行（必须有2次以上的循环）

1.7 animation-fill-mode（不播放时状态）

animation-fill-mode:none;

值	意
none	默认值
forwards	动画结束时的状态
backwards	动画开始时的状态
both	动画结束或开始的状态

1.8 animation-play-state（运行或暂停）

animation-play-state:paused/*暂停*/running/*默认值，运行*/;

1.9 animation（简写）

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation:名字 播放时间 动画类型 动画延迟 循环次数 是否反向运动 不播放时状态 运行或暂停;

2. CSS3 @keyframes（关键帧）

语法

 @keyframes 定义名字{
 from{css属性;}
 30%{css属性;}
 80%{css属性;}
 to{css属性;}
}

不是所有属性动能有效果
加前缀

 @-webkit-keyframes 定义名字{
 from{css属性;}
 30%{css属性;}
 80%{css属性;}
 to{css属性;}
}

3.动画优化 will-change（提前通知浏览器要做什么动画）

1.position-fixed替换background-attachment
2.带图片的元素放在伪元素中
3.巧用will-change

will-change:auto;

值	意
auto	可能有动画需要优化
scroll-position	滚屏动画
contents	改变元素的内容
—custom-ident—	明确将要改变的属性的名称
—animateable-feature—	可动画的一些证，比如left，top，margin等

兼容：IE13+ ，Firefox46+，Chrome49+，Safari9.1+，Opera39+ ，ios9.3+ ，Android52+