Box Animation
Simple Animation: simple animation often called "transition transition" - CSS properties, over time, a change from one value to another value.
Gradient time functions: transition-timing-function
Height of the background and applies a transition, not all properties are to support the transition, color, size, transparency properties of the class are usually supported transition effects.
Bezier curve: cubic-bezier Bezier curve is drawn by the four reference points from a curve in the CSS, the first point and a fourth point has been fixed, the user can set the second point and the third curve the ordinate represents the gradient trajectory, the abscissa represents time
示例：transition-timing-function:cubic-bezier(0.25,0.1,0.25,1)
Default Bezier curve:
Ease getting fast, uniform, slow cubic-bezier (0.25,0.1,0.25,1)
gradually ease-in fast, uniform cubic-bezier (0.42,0,1,1)
ease-out uniform, slowing cubic-bezier (0,0,0.58,1)
ease-in-out and ease the like, but the (large amplitude) than the acceleration ease cubic-bezier (0.42,0,0.58,1)
Linear full uniform cubic-bezier (0,0,1,1)
Complex animations
Related to the property:
animation-name: the name of the animation
animation-duration: total duration of a single movie
animation-timing-function: function of time
animation-delay: time delay before playing long
animation-iteration-count: Views special value: infinite
animation-direction: playback sequence
normal: normal play
alternate: turn reverse play
Box deformation:
Visual effects can be changed by the deformation of the box can be changed by deforming a box visual effect.
How deformation:
Of the cassette may be modified by the transform property css
Define the origin transform-origin:
Location will have an impact origin of some deformation
Can transform-origin CSS property provided by the origin of the box.
The default value of this attribute is the center of the box, the arrangement is very similar to background-position
Deformation categories:
Rotation (Rotate) scaling (Scale) Mobile (Translate) inclined (skew)
Other attributes:
Perspective Distance: perspective This property is set to the parent element of the deformable element
Visibility back surface: backface-visibility
visible: By default, the back is visible
hidden: the back is not visible