CSS 3 animations

Source: Internet
Author: User

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
    • Animation effects

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.