CSS 过渡动画

一、过渡　　

　　过渡（transition)是CSS3中具有颠覆性的特征之一，可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

　　在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

　　语法格式：

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

　　  属性：

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

二、设置过渡属性

　　使用该属性可以指定某个元素的过渡动画的 CSS属性名称。

　　语法格式：

transition-property:none | all | [<ident>][,<ident>] *;

• • 　　none：表示没有元素；
  • all：默认值，表中针对所有的元素，包括 :before 和 :after 元素；
  • ident：指定 CSS 属性列表，可以包括所有的属性，包括新添加的 CSS3 的属性

三、设置过渡时间

　　使用该属性来定义转换动画的时间长度。

　　语法格式： 

transition-duration: <time> [,<time>] * ;

• • 　　初始值为0，适用于所有元素，以及 :before 和 :after 伪元素；
  • 单位是 秒 s 比如 0.5s 这个s单位必须写

四、设置过渡动画类型(运动曲线)

　　该属性用来定义过渡动画的类型。

　　语法格式：

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out  | cubicbezier{<number>,<number>,<number>,<number>}

• • ease：平滑过渡，等同于 cubic-bezier(0.25,0.10.25,0.1) 函数，即 立方贝塞尔。（默认值）
  • linear：线性过渡，等同于 cubic-bezier(0.0,0.0,1.0,1.0) 函数
  • ease-in：由慢到快，等同于 cubic-bezier(0.42,0.0,1.0,1.0) 函数
  • ease-out：由快到慢，等同于 cubic-bezier(0,0,0.58,1.0) 函数
  • ease-in-out：由慢到快再到慢，等同于 cubic-bezier(0.42,0.0,0.58,1.0) 函数
  • cubic-bezier：特殊的 立方贝塞尔曲线效果。

　　运动曲线示意图：

　　

五、设置延迟时间

　　该属性用来定义开启过渡动画的延迟时间。

　　语法格式：

transition-delay:<time> [,<time>] *;

• • 　  初始值为0，适用于所有元素，以及 :before 和 :after 伪元素。
  • 设置时间可以为正整数，负整数和零，非零的时候必须设置单位是 s(秒) 或者 ms（毫秒）
  • 时间为负数的时候，过渡的动画会从该时间点开始显示，之前的动作被截断；
  • 时间为正数的时候，过渡的动画会延迟触发；

六、设置触发方式

　　CSS3 动画一般通过鼠标事件或状态定义动画，如 CSS伪类和 JavaScript 事件。

　　CSS 动态伪类

动态伪类	作用元素	说明
:link	只有链接	未访问的连接
:visited	只有链接	访问过的链接
:hover	所有元素	鼠标经过的元素
:active	所有元素	鼠标点击元素
:focus	所有可被选中的元素	元素被选中

　　JavaScript 事件包括：click、focus、mousemove、mouseover、mouseout 等事件。

　　还有另外一种方法是 使用 CSS3 媒体查询来实现过渡动画。