Details: http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
The first part: CSS Transition
The function of transition is to specify the time required for the change of state.
img{ transition:1s;}
The above code specifies that the image amplification process takes 1 seconds, the effect is as follows.
We can also specify properties that are applicable to transition, such as height only
img{ transition:1s height;}
In this way, only the height change takes 1 seconds to implement, and the other changes (mostly width) are still instantaneous,
In the same line transition statement, you can specify multiple properties individually
img{ transition:1s height, 1s width;} // In this way, the change in height and width is simultaneous
We hope that the height of the first change, and so on after the end, then let the width change. It is easy to achieve this by specifying a delay parameter for width .
img{ transition:1s height, 1s 1s width;} // Let the height change first, wait for the end, then let the width change
Transition state Change Speed (also known as timing function), the default is not uniform, but gradually slowed down, this is called ease.
In addition to ease, other modes include
(1) Linear: constant (2) ease-in: Acceleration (3) ease-out: Deceleration (4) cubic-bezier function: Custom Speed mode
- The limitations of transition
The advantage of transition is that it is easy to use, but it has several great limitations.
(1) Transition requires event triggering, so it can't happen automatically when the page is loaded.
(2) Transition are disposable and cannot be repeated unless triggered repeatedly.
(3) Transition can only define the start and end states, and cannot define an intermediate state, that is, there are only two states.
(4) A transition rule that defines only one property change and cannot involve multiple attributes.
Part II: CSS Animation
First, the CSS animation needs to specify the duration of the animation for a period, and the name of the animation effect.
div:hover { animation:1s rainbow;}
The code above indicates that when the mouse hovers over a DIV element, an animated effect named Rainbow is generated with a duration of 1 seconds. To do this, we also need to use the KeyFrames keyword to define the rainbow effect
@keyframes Rainbow { 0% {background: #c00;} 50% {background:orange;} 100% {background:yellowgreen;}}
By default, animations play only once. Add the Infinite keyword to allow the animation to play unlimited times
div:hover { animation:1s rainbow Infinite;}
You can also specify how many times the animation will play, such as 3 times
div:hover { animation: 1s rainbow 3;}
2.2 Animation-fill-mode hold End state
When the animation finishes, it jumps from the end state to the start state immediately. If you want to keep the animation in the end state, you need to use the Animation-fill-mode property.
div:hover { animation:1s rainbow forwards;}
Animation-fill-mode can also use the following values
(1) None: Default value, back to the state when the animation does not start. (2) backwards: Let the animation return to the state of the first frame. (3) Both: Apply forwards and backwards rules in turn according to Animation-direction (see later).
2.4 Properties of Animation
div:hover { 3 forwards normal;}
The last item can be two common types of normal reserve, which specifies the direction of the East ring play.
2.6 Animation-play-state
Sometimes, the animation will stop abruptly during playback. At this point, the default behavior is to jump back to the start state of the animation
Use the Animation-play-state property if you want the animation to remain in a state of abrupt termination
div { animation:spin 1s linear infinite; Animation-play-state:paused;} Div:hover { animation-play-state:running;}
The above code specifies that when no mouse is hovering, the animation state is paused, and once hovering, the animation state changes to continue playing. The effect is as follows.
CSS 3 animations