CSS3 animation animation related properties and Keyframe rules keyframes detailed description

When I wrote the three-dimensional cube yesterday, I used the grammar of the animation.

Let's review the system today.
The transition transition has its limitations.
Although simple, it can only change between two states
And it needs to be driven by events to be able to
Not able to exercise on their own
So to solve this problem,
We need animation animations

Animation

If you want to achieve animation effects
Just having the animation attribute is not enough.
We also need @keyframes rules.
First look at an example

P class= "Demo" ></p>

. demo {    width:100px;    height:100px;    Background-color:gold;}. demo:hover {    animation:change 2s linear;} @keyframes Change {    0% {        background-color:red;    }    50% {        background-color:purple;    }    100% {        background-color:lime;    }}

When the mouse hovers, the element turns red and transitions to purple with a transition to green

Let's take a look at @keyframes rules first.

KeyFrames

In @keyframes, we define an animation keyframe
The animation will then perform the transition execution according to the frame state we specified in the KeyFrames keyframe.
0%-100% represents the time transition of an animation
0% and 100% in the rules,
Can be replaced by the From and to keywords

@keyframes XXX {from    {        ...    }    To {        ...    }}

If we omit the start frame, the browser will transition in its original style

@keyframes Change {    100% {        background-color:lime;    }}

In addition, we can also write the same frame together like this

@keyframes Change {    from,to {        background-color:red;    }    50% {        background-color:blue;    }}

Animation

Animation is a composite property with the following sub-properties

• Animation-name
  Specify the name of the KeyFrames animation

• animation-duration
  Specify the animation execution time

• animation-timing-function
  Specifies the speed curve of the animation, the default "ease" easing

• Animation-delay
  Specify animation delay time, default "0" no delay

• Animation-iteration-count
  Specifies the number of times the animation plays, with the default of "1" Executing 1 times

• animation-direction
  Specify the direction of the animation execution, default "normal"

This compound attribute is more complicated than our transition.
The first four attributes are not much explained, similar to our transition
Forget the classmate, Poke here and the portal

Animation-iteration-count Animation times We're not just filling in numbers.
You can also use one of the commonly used keywords infinite infinite loops

Animation-direction has the following attribute values in addition to normal

• Reverse
  Reverse animation

• Alternate
  Play the animation in turn

• Alternate-reverse
  Play back the animation in reverse rotation

By an example to explain

. demo {    width:100px;    height:100px;    Background-color:gold;}. demo:hover {    animation:change 1s 2 linear;} @keyframes Change {to    {        width:200px;    }}

Default normal:

Two-time Test animations:
100px-200px
100px-200px

. demo:hover {    animation:change 1s 2 linear reverse;/* Change */}

Reverse:

Two-time Test animations:
200px-100px
200px-100px

. demo:hover {    animation:change 1s 2 linear alternate;/* Change */}

Alternate:

Two-time Test animations:
100px-200px
200px-100px

. demo:hover {    animation:change 1s 2 linear alternate-reverse;/* Change */}

alternate-reverse:

Two-time Test animations:
200px-100px
100px-200px

Animation-fill-mode

The next two properties I'm going to talk about are not animation of the sub-properties
So it can't be written in animation.

ANIMATION-FILL-MODE specifies the state outside the object animation time, default "None"
In addition to none, there are the following attribute values

• forwards
  After the animation is complete, keep the last property (defined at the last frame)

• Backwards
  Apply the Start property (defined in the first frame) before animation-delay the specified time and before the animation is displayed

• both
  Application of forwards and backwards two modes

forwards
This property is pretty useful.
Or the example we have above.

. demo:hover {    animation:change 1s linear;/* Change */    animation-fill-mode:forwards;/* Change */}

We found that after 1s, the element did not go back to the original 100px, but it kept the 200px state of our last frame.

Backwards
To understand this attribute, we need to first add a delay

. demo:hover {    animation:change 1s linear 1s;/* change */    /*animation-fill-mode:backwards;*//* To increase */} @keyframes Change {from    {/  * * + * *        width:150px;    }    to {        width:200px;    }}

I don't deserve a picture.
We found that after the mouse hover, 1s immediately after the 150px, and then transition to 200px
hover-0s, 1s, 2s
100px, transient 150px–> transition to 200px

Add Backwards now

. demo:hover {    animation:change 1s linear 1s;/* change */    animation-fill-mode:backwards;/* increment */}

This time we find that the mouse hover is changed to 15px, then 1s transitions to 200px
hover-0s, 1s, 2s
Transient 150px->150px–> transition to 200px
This is the role of backwards, applying the style of the first frame animation before the delay, and then preparing the transition

Animation-play-state

ANIMATION-PLAY-STATE Specifies whether the animation runs or pauses. Default "Running"
Except running and paused.
With this property and with JS we can control the animation pause and run

Demo.style.animationPlayState = "Paused";

Today's animation is written first so much, it feels like writing for a long time
Summarize animation-related performance issues later