CSS3 transition Effects (transition) and animations (animation)

1.Transition

Transition is an intuitive effect that allows a property of a DOM element to be from an old value to a new value within a fixed time. Currently Firefox, Opera, Safari and chrome support transition, IE is not supported.

Syntax: Transition: Property duration timing-function delay;

TRANSITION-PROPERTY Specifies the name of the CSS property to change

Transition-duration How long it takes to specify the effect (S/MS)

Transition-timing-function Specify the speed of the transition effect (linear ease ease-in ease-out ease-in-out cubic-bezier (n,n,n,n))

value	Description
Linear	Specifies the transition effect (equal to Cubic-bezier (0,0,1,1)) that starts at the same speed to the end.
Ease	A transition effect (Cubic-bezier (0.25,0.1,0.25,1)) that specifies a slow start and then a slow end.
Ease-in	Specifies a transition effect that starts at a slow speed (equals Cubic-bezier (0.42,0,1,1)).
Ease-out	Specifies a transition effect that ends at a slow speed (equals Cubic-bezier (0,0,0.58,1)).
Ease-in-out	Specifies a transition effect (equal to Cubic-bezier (0.42,0,0.58,1)) that starts and ends at a slow speed.
Cubic-bezier (n,n,n,n)	Define your own values in the Cubic-bezier function. The possible values are numbers between 0 and 1.

Transition-delay defining the delay time for transition effects

Lineareaseease-inease-outease-in-out

2. Animation

CSS Animation (animations) simply means that in a fixed period of time in the animation to change its CSS or some value within a certain frequency, so as to achieve visual conversion animation effect. Many aspects of animations can be controlled, including animation run time, start and end values, animation pauses and delays in its start time, and so on.

Currently supported animation browsers are: Firefox, Safari and Chrome,ie and opera are not supported.

Syntax: Animation: name duration timing-function delay Iteration-count direction;

Properties	Description	CSS
@keyframes	Specifies the animation.	3
Animation	The shorthand properties for all animated properties, except for the Animation-play-state property.	3
Animation-name	Specifies the name of the @keyframes animation.	3
Animation-duration	Specifies the seconds or milliseconds that the animation takes to complete a cycle. The default is 0.	3
Animation-timing-function	Specifies the speed curve of the animation. The default is "ease".	3
Animation-delay	Specifies when the animation starts. The default is 0.	3
Animation-iteration-count	Specifies the number of times the animation is played. The default is 1.	3
Animation-direction	Specifies whether the animation will play backwards in the next cycle. The default is "normal".	3
Animation-play-state	Specifies whether the animation is running or paused. The default is "running".	3
Animation-fill-mode	Specifies the state outside the object's animation time.	3

CSS3 transition Effects (transition) and animations (animation)