1. Animation Properties

Animation is one of the CSS3 properties in addition to Transform and Transiton.

Specific include: Animation-name, animation-duration, animation-timing-function, animation-delay, animation-rotund-count, and animation-directio N, animation-fill-mode, animation-play-state.

Second, cook your food

2.1 animation – the name

Grammar: animation – name: none | index; Specifies the name of the KeyFrame to bind to the selector.

Keyframe key frames

You can set a certain order for the key positions of the animation changes.

Its rule is @keyframes name {… } (Note that s should be added, otherwise the rule cannot be recognized.)

There are two ways to write it: 0-100%, where you can create multiple percentages to animate elements.

Assume the custom keyfram name is: index

@keyframes index {
    0% {
        / *... * /
    }
    50% {
        / *... * /
    }
    100% {
        / *... * /}}Copy the code

Another way to write it is from-to, where from equals 0 percent, to equals 100 percent, with the normal percentage in between.

@keyframes index {
    from {
        / *... * /
    }
    50% {
        / *... * /
    }
    to {
        / *... * /}}Copy the code

2.2 animation – duration

Syntax: animation-duration: time;

Specifies the time ** (duration) ** to complete the animation, in seconds or milliseconds.

2.3 animation – timing – function

Grammar: animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(number, number, number, number)]*

Specifies the speed curve of the animation.

2.4 animation – delay

Syntax: animation-delay: time;

Specifies the delay time, in seconds or milliseconds, before the animation begins.

2.5 Animation-revive-count (Number of iterations)

Grammar: animation – iteration – count: infinite | number;

Specifies the number of times the animation should be repeated ** (number of iterations) **.

2.6 Animation-direction (Playback direction)

Grammar: animation – direction: normal | reverse | alternate | alternate – reverse;

Specifies the direction in which the animation plays.

Normal: the default value is forward play.

Reverse: Indicates the reverse playback.

Alternate: Reverse play for even numbers, forward play for odd numbers.

Alternate-reverse: indicates the reverse mode for an odd number of times and the forward mode for an even number of times.

2.7 Animation-fill-mode

Grammar: animation – fill – mode: none | recently | backwards | to both;

Specifies whether the animation is visible before or after playback.

None: Does not change the default behavior.

Forwards: When the animation is finished, hold the last property value (defined in the last keyframe).

Backwards: Apply the start property values (defined in the first keyframe) within the time specified by animation-delay before the animation is displayed.

Both: Forward and backward fill modes are applied.

2.8 Animation-play-state (Playback state)

Grammar: animation – play – state: running | paused

Specifies whether the animation is running or paused, that is, controls the animation playback state.

Running: Default value. Animation plays normally.

Paused: The animation is paused.

Three, test the cat

HTML:

<div class="box">Animation</div>
Copy the code

.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); }}Copy the code

4. Browser compatibility