CSS transition animation

First, the transition　　

　　Transition (Transition) is one of the features CSS3 subversive, may be used without the JavaScript or Flash animation, when the element is converted from one style to another when the effect of the addition element pattern.

　　In transition can be realized in CSS3 tween (transitions), as long as the current element and the "Properties" i.e., two states (A and B refers to our generation), a smooth transition can be achieved changes, in order to facilitate demo using hover between two states, but not limited to hover state to make the transition.

　　Syntax:

transition: the transition to attribute to spend time motion curve when to start; 
if multiple sets of attributes change, or separated by commas.

　　  Attributes:

Attributes	description	CSS
transition	Shorthand property used to set a property in the four transition properties.	3
transition-property	Name of transition provisions apply CSS properties.	3
transition-duration	The time it takes to define the transition effect. The default is 0.	3
transition-timing-function	Transition effect a predetermined time curve. The default is "ease".	3
transition-delay	When prescribed transition effects begin. The default is 0.	3

Second, set the transition properties

　　Use this property to specify the name of the CSS property of an element of transition animation.

　　Syntax:

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

• • 　　none: that there is no element;
  •       all: The default values ​​for all elements in the table, comprising: before and: after elements;
  •       ident: Specifies the CSS property list may include all of the properties, including the properties of the newly added CSS3

Third, set the transition time

　　Use this property to define the length of the converted movie.

　　Syntax: 

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

• • 　　The initial value is 0, for all elements, and: before and: after pseudo elements;
  •       For example, in seconds s s 0.5s this unit must write

Fourth, animate the transition type (motion profile)

　　This attribute is used to define the type of transition animation.

　　Syntax:

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

• •      ease: smooth transition, equivalent to a cubic-bezier (0.25,0.10.25,0.1) function, i.e., a cubic Bezier. ( Default value )
  •      linear: linear transition, equivalent to a cubic-bezier (0.0,0.0,1.0,1.0) function
  •      ease-in: from slow to fast, equivalent to cubic-bezier (0.42,0.0,1.0,1.0) function
  •      ease-out: from fast to slow, equivalent to cubic-bezier (0,0,0.58,1.0) function
  •      ease-in-out: from slow to fast and then slow, equivalent to cubic-bezier (0.42,0.0,0.58,1.0) function
  •      cubic-bezier: special effect cubic Bezier curve.

　　A schematic view of the motion profile:

　　

Fifth, set the delay time

　　This attribute is used to define open transition animation delay time.

　　Syntax:

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

• • 　  The initial value is 0, for all elements, and: before and: after pseudo elements.
  •     Time may be set to a positive integer, and negative integers zero, non-zero when the unit is set to be s (seconds) or ms (milliseconds)
  •     Time is negative when the transition animation will be displayed from that point in time, before the action is cut off;
  •     Time is positive when the transition animation is delayed trigger;

Sixth, set the trigger mode

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

　　CSS 动态伪类

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

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

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