CSS3动画

CSS3动画

• 概念
  使元素从一种样式逐渐变化为另一种样式的效果。
• 兼容性
  IE10+、Firefox16+、Chrome43+、Safari9+、Opera30+、Android（-webkit-）

CSS3 animation

animation-name属性

• 概念
  检索或设置对象所应有的动画名称。
• 语法
  animation-name：keyframename（要绑定到选择器的关键帧的名称） | none（指定没有动画）；

animation-duration属性

• 概念
  检索或设置对象动画的持续时间。
• 语法
  animation-duration：time（默认值为0，单位为毫秒或秒）；

animation-timing-function属性

• 概念
  检索或设置对象动画的过渡类型。
• 属性值

属性值	描述
linear	线性过渡，等同于贝塞尔曲线（0.0，0.0，1.0，1.0）
ease	平滑过渡，等同于贝塞尔曲线（0.25，0.1，0.25，1.0）
ease-in	由慢到块，等同于贝塞尔曲线（0.42，0，1.0，1.0）
ease-out	由快到慢，等同于贝塞尔曲线（0，0，0.58，1.0）
ease-in-out	由慢到快再到慢，等同于贝塞斯曲线（0.42，0，0.58，1.0）

animation-delay属性

• 概念
  检索或设置对象动画的延迟时间。
• 语法
  animation-delay：time（默认值为0，单位为毫秒或秒）；
  animation-iteration-count属性
• 概念
  检索或设置对象动画的循环次数。
• 语法
  animation-iteration-count：infinite（无限次数循环） | number（默认值为1，循环的次数））
  animation-direction属性
• 概念
  检索或设置对象动画在循环中是否方向运动。
• 属性值

属性值	描述
normal	正常方向
reverse	反方向运动
alternate	动画先正常运动再反方向运动，并持续交替运行
alternate-reverse	动画先反方向运动再正方向运动，并持续交替运行
initial	默认值
inherit	继承父元素的属性值

animation-fill-mode

• 概念
  规定当动画不播放时（当动画完成或当动画有延迟未开始播放时），要应用到元素的样式。
• 属性值

属性值	描述
none	默认值，不设置对象动画之外的状态
forwards	设置对象状态为动画结束时的状态
backwards	设置对象状态为动画开始时的状态
both	设置对象状态为动画结束或开始的状态
initial	设为默认值
inherit	继承父元素的属性值

animation-play-state属性

• 概念
  指定动画是否正在运行或暂停。
• 语法
  animation-play-state：paused | running；

animation属性缩写

• 语法
  animation：name duration timing-function delay iteration-count direction fill-mode play-state；
• 注意
  name必须为第一个，其余的顺序随意，如果只有一个时间，则系统默认为是time-function的值，想要设置delay的话必须输入2个时间值。

CSS3 @keyframes

• 概念
  关键帧，可以指定任何顺序排列来决定animation动画变化的关键位置。

• 使用说明
  使用@keyframes规则创建动画，通过逐步改变从一个CSS样式设定到另一个。在动画过程中可以通过@keyframes规则多次更改CSS样式的设定。

• 语法

   @-webkit-keyframes animation{
   	keyframes-selector{
   		css-styles;
   	}
   }                    // 手机端
   @keyframes animation{
   	keyframes-selector{
   		css-styles;
   	}
   }
  

• 参数说明

参数	说明
animationname	必写项，定义animation的名称
keyframes-selector	必写项，动画持续时间的百分比，0-100%、from（0%）、to（100%）
css-styles	必写项，一个或多个合法的CSS样式属性

CSS3 will-change

• 概念
  提前通知浏览器元素将要做什么动画，让浏览器提前准备何时的优化设置。
• 属性值

属性值	描述
auto	此关键字表示没有特定的意图，适用于它通常所做的任何启发式和优化
scroll-position	表示将要改变元素的滚动位置
contents	表示将要改变元素的内容
<custom-ident>	明确指定将要改变的属性与给定的名称
<animat teable-feature>	可动画的一些特征值，例如left、top、margin等

• 兼容性
  IE13+、Firefox47+、Chrome49+、Safari9.1+、Opera39+、IOS9.3+、Android52+
• 注意事项
  不要滥用、提前声明、用完清除（通过JS来清除）。