A, Animation property (animation)

Animation is CSS3 properties, in addition to transform, transiton an animation properties.

具体有：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state。

Second, knife Kaiushi

2.1 animation-name

Syntax: animation-name: none | index;provisions need to be bound to a selector keyframe name.

keyframe keyframes

You can set a certain order to change the animation key positions.

It is the rule name @keyframes {...} (Note that to add s, or can not recognize the rule.)

There are two ways for writing a 0% --100% intermediate elements to create a plurality of percentage animate.

Suppose a custom keyfram name: index

@keyframes index {
    0% {
        /* ... */
    }
    50% {
        /* ... */
    }
    100% {
        /* ... */
    }
}
复制代码

Another was written, from - to, from equivalent to 0%, to the equivalent of 100%, the percentage of added normal intermediate.

@keyframes index {
    from {
        /* ... */
    }
    50% {
        /* ... */
    }
    to {
        /* ... */
    }
}
复制代码

2.2 animation-duration

grammar: animation-duration: time;

** completion of a predetermined time (duration) it takes for the animation ** in seconds or milliseconds.

2.3 animation-timing-function

Prescribed speed of the animation curve.

2.4 animation-delay

grammar: animation-delay: time;

Provisions before the movie starts the delay time in seconds or milliseconds.

2.5 animation-iteration-count (number of iterations)

grammar: animation-iteration-count: infinite | number;

** specified number of times the animation should play repeatedly (number of iterations) **.

2.6 animation-direction (direction of play)

grammar: animation-direction: normal | reverse | alternate | alternate-reverse;

The provisions of the animation playback.

normal: default value, positive play.

reverse: reverse playback.

alternate: even number of times reverse play, odd forward play.

alternate-reverse: reverse play odd, even number of times forward play.

2.7 animation-fill-mode (fill mode)

grammar: animation-fill-mode: none | forwards | backwards | both;

Provisions animation before or after the play, its animation is visible.

none: do not change the default behavior.

forwards: When the animation is completed, holding the last attribute value (defined in the last key frame).

backwards:,, application start property value (defined in the first key frame) prior to animation display animation-delay within a specified period of time.

both: forward and backward fill patterns are applied.

2.8 animation-play-state (state of play)

grammar: animation-play-state: running | paused

The provisions of the animation is running or suspended, that control the animation playback.

running: defaults, animation normal playback.

paused: suspended animation.

Third, the small scale chopper

html：

<div class="box">Animation</div>
复制代码

.box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: index 2s ease-in .2s 3 normal both;
}
/* @keyframes index {
    0% {
        width: 200px;
    }
    50% {
        height: 200px;
    }
    100% {
        transform: rotate(180deg)
    }
} */
@keyframes index {
    from {
        width: 200px;
    }
    50% {
        height: 200px;
    }
    to {
        transform: rotate(180deg);
    }
}
复制代码

Fourth, the browser compatibility

Animation CSS3 animation properties of