Chapter 2 CSS3 animation effect-Original Water

Chapter 2 CSS3 animation effect-original learning points of water:

1. animation Overview

2. Attribute details

3. Abbreviations and versions

Lecturer: Li Yanhui

This chapter mainly discusses the animation effects of CSS3 in HTML5, which can be controlled through key frame modes similar to Flash.

1. Introduction to animation

CSS3 provides animation effects similar to key frame control in Flash, which is implemented through the animation attribute. Therefore, the previous transition attribute can only achieve animation effects by specifying the initial state and end state of the attribute, which has certain limitations.

Animation effects are mainly composed of two parts: 1. Declare an animation through a key frame similar to that in Flash animation; 2. Call the animation with the key frame declaration in the animation attribute.

The animation provided by CSS3 is a composite attribute that contains many sub-attributes. See the following table:

Attribute	Description
Animation-name	Specifies the name of a key frame animation. The animation name must correspond to a @ keyframes rule. When CSS is loaded, the animation specified by animation-name is applied to execute the animation.
Animation-duration	Used to set the time required for playing an animation
Animation-timing-function	Used to set the playing mode of an animation
Animation-delay	Used to specify the animation Delay Time
Animation-iteration-count	Used to specify the number of cycles for playing an animation
Animation-direction	Used to specify the playback direction of an animation
Animation-play-state	Used to control the playback status of an animation
Animation-fill-mode	Used to set the time-out attribute of an animation
Animation	The abbreviated form above

In addition to the nine attributes, an important attribute of the animation effect is the key frame attribute @ keyframes. It declares an animation, and then calls the animation of the Key Frame declaration in animation.

// Basic format, "name" can be customized

@keyframes name {/*...*/}

Ii. Attribute details

Create a basic style before explaining the animation attributes.

// A p element

I'm HTML5.

// Set CSS

p {    width: 200px;    height: 200px;    border: 1px solid green;}

1. @ keyframes

// The first step of creating an animation is to declare an animation key frame.

@keyframes myani {     0% {        margin-left:0px;    }    50% {        margin-left:100px;    }    100% {        margin-left:0px;    }}

// Or duplicate, which can be written together in parallel

@keyframes myani {     0%, 100% {        margin-left:0px;    }    50% {        background-color: black; margin-left:100px;    }}

2. animation-name

// Call @ keyframes Animation

animation-name: myani;

Attribute Value	Description
None	Default Value. No animation is specified.
INDEX	Is the name of the animation created by @ keyframes

3. animation-duration

// Set the animation playback time

animation-duration: 1s;

Of course, the above uses the key frame method. Three key frames are inserted here. 0% sets the white and left offset to 0, which is consistent with the initial state, indicating that the animation starts from this place. 50% black, with a left offset of PX. And 100% is the last setting, and returns to the white and left offset is 0. The whole animation is clear at a glance.

For key frame usage, the percentage is relatively easy to control. Of course, there are other control methods.

// Transition from what status to what status

@keyframes myani {    from {        margin-left:0px;    }    to {        margin-left:100px;    }}

4. animation-timing-function

// Set easing

animation-timing-function: ease-in;

5. animation-delay

// Set the delay time

animation-delay: 1s; 

6. animation-iteration-count

// Set the number of cycles

animation-iteration-count: infinite; 

Attribute Value	Description
Times	The default value is 1.
Infinite	Indicates an infinite loop

7. animation-direction

// Set the alternating easing direction

animation-direction: alternate;

Attribute Value	Description
Normal	Default Value: Forward of each playback.
Alternate	One forward, one backward, one forward, one backward Alternate

8. animation-play-state

// Sets the animation for stopping playback.

animation-play-state: paused;

9. animation-fill-mode

// No response is returned after the setting is complete.

animation-fill-mode: forwards;

Attribute Value	Description
None	The default value indicates that the process is performed and ended as expected.
Forwards	After the animation ends, the last key frame position is applied, that is, no return is returned.

Backforwards	After the animation ends, the starting key frame position is quickly applied, that is, the returned
Both	Generate the forwards or backforwards Effect Based on the situation

// Both needs to be combined. The number of times and playback direction are animation-iteration-count: 4; animation-direction: alternate;

6. Abbreviations and versions

// Full version in short form

animation: myani 1s ease 2 alternate 0s both;

To be compatible with the old version, you need to add the corresponding browser prefix. The version information is as follows:

	Opera	Firefox	Chrome	Safari	IE
Prefix required	15 ~ 29	5 ~ 15	4 ~ 42	4 ~ 8	None
No prefix is supported.	None	16 +	43 +	None	10.0 +

// Compatible with the full version. Opera adds webkit to this attribute, so no

-o--webkit-animation: myani 1s ease 2 alternate 0s both;-moz-animation: myani 1s ease 2 alternate 0s both;-ms-animation: myani 1s ease 2 alternate 0s both;transition: all 1s ease 0s;

// @ Keyframes must also be prefixed

@-webkit-keyframes myani {...} @-moz-keyframes myani {...} @-o-keyframes myani {...} @-ms-keyframes myani {...} keyframes myani {...}