4-8、CSS3动画

4-8、CSS3动画

使元素从一种样式逐渐变化为另一种样式的效果。

手机设备的浏览器在使用CSS3动画时，要加上webkit前缀。

---

animation-name 属性检索或设置对象所应用的动画名称。
语法
animation-name:keyframename I none；
参数说明
keyframename：指定要绑定到选择器的关键帧的名称；
none：指定有没有动画（可用于覆盖从级联的动画）。

示例：
颜色对应，这里只是定义-引用，所以并不会动。

---

animation-duration 属性检索或设置对象动画的持续时间。
语法
animation-duration:time；
参数说明
time指定动画播放完成花费的时间。默认值为0，意味着没有动画效果。
加上运行时间之后，动画就可以动起来了。

---

animation-timing-function
属性检索或设置对象动画的过渡类型。
值：

---

animation-delay
属性检索或设置对象动画的延迟时间。
语法
animation-delay:time；
参数说明
可选。定义动画开始前等待的时间，以秒或毫秒计。默认值为0。
在这里，延迟两秒是动画之外，不包含在动画时间的十秒。

---

animation-iteration-count 属性检索或设置对象动画的循环次数。
语法
animation-iteration-count:infinite | <number>；
参数说明
为数字，其默认值为“1"；infinite为无限次数循环。

在这个例子中，运行情况是打开页面-延时2s-开始无限循环。
有一个delay值2s，delay定义的是动画外的事情，而循环是针对动画本身，所以中间不会停顿两秒。

---

animation-direction属性
检索或设置对象动画在循环中是否反向运动。
语法
animation-direction:normal | reverse | alternate | alternate-reverse | initial | inherit；
参数说明
normal：正常方向；
reverse：反方向运行；
alternate：动画先正常运行再反方向运行，并持续交替运行；
alternate-reverse：动画先反运行再正方向运行，并持续交替运行。

后两个运行，依赖于循环，如果没有循环，那么就没有二次运行，就更没有反方向。

---

animation-fill-mode 属性
规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式。
语法
animation-fill-mode:none | forwards | backwards | both | initial | inherit；
参数说明
none：默认值。不设置对象动画之外的状态；
forwards：设置对象状态为动画结束时的状态；
backwards：设置对象状态为动画开始时的状态；
both：设置对象状态为动画结束或开始的状态。

---

animation-play-state 属性指定动画是否正在运行或已暂停。
语法
animation-play-state:paused | running；
参数说明
paused：指定暂停动画；
running：默认值，指定正在运行的动画。

这里的使用，通常在与js控制其值的变化，比如运行中的时候停止，然后再继续就可以接着刚刚的状态动。比如鼠标放上去和挪开，开始暂停。

---

animation属性
复合属性。检索或设置对象所应用的动画特效。
语法
animation:name duration timing-function delay iteration-count direction fill-mode play-state；
name和duration 是必须的，假设只有一个值，那么默认为duration，有两个时间值段的话，第一个是duration，第二个是delay，优先时间，延迟在后。

---

Keyframes 定义
关键帧，可以指定任何顺序排列来决定Animation动画变化的关键位置。
使用说明
使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。
在动画过程中可以通过@keyframes规则多次更改CSS样式的设定。

---

will-change
手机端和老电脑配置较差，怎么办呢？

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

• 目标
  增强页面渲染性能。

• CPU和GPU
  CPU即中央处理器，解释计算机指令以及处理计算机软件中的数据。
  GPU即图形处理器，专门处理和绘制图形相关的硬件。GPU是专为执行复杂的数学和几何计算而设计的，有了它，CPU就从图形处理的任务中解放出来，可以执行其他更多的系统任务。

• 硬件加速
  在计算机中把计算量非常大的工作分配给专门的硬件来处理，减轻CPU的工作量。

• 现状
  CSs的动画、变形、渐变并不会自动的触发GPU加速，而是使用浏览器稍慢的软件渲染引擎。
  在transition，transform和animation的世界里，应该卸载进程到GPU以加快速度。
  只有3D变形会有自己的layer，2D变形不会。

translateZ()(or translate3())
Hack为元素添加没有变化的3D变形，骗取浏览器触发硬件加速。

代价
这种情况通过向它自己的层叠加元素，占用RAM和GPU存储空间。

will-change 提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置。
语法
will-change : autolscroll-position | contents | <custom-ident> | <animateable-feature>；
关键词说明
auto：此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化。
scroll-position：表示将要改变元素的滚动位置。
contents：表示将要改变元素的内容。
< custom-ident >：明确指定将要改变的属性与给定的名称。
< animateable-feature >：可动画的一些特征值，比如left、top、margin等。

兼容性
IE13+、FireFox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+

will-change是再div > div下，所以它会改变这下边的所有div的transform；

使用注意（勿滥用、提前申明、remove去掉）
使用过之后，一定要去掉，否则就会一直调用gpu，一般是js控制去掉，也可以鼠标事件控制去掉。