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)