Summarize the new features of CSS3 (Animation) and css3animation

Summarize the new features of CSS3 (Animation) and css3animation

Animation is one of the highlights of css3. //

Specify @ keyframe through the animation attribute to complete the Key Frame animation;

@ Keyframe usage:

@ Keyframes name {0% {top: 0;}/* 0% can be replaced by the from keyword */50% {top: 10px;} 100% {top: 0 ;} /* 100% Replace with the to keyword */}

Because it is CSS3, there are no unexpected prefixes:

-- The image is from the key frame in MDN and CSS.

Multiple attributes can be entered in a single frame, and they do not need to be consistent, for example:

@-Webkit-keyframes identifier {from {top: 0;} 50% {top: 10px; background-color: red ;}to {top: 20px; color: red ;}} /* this is a fully valid key frame definition */

Note the following points:

A valid attribute in a key frame is an animated attribute. If an animation attribute is unavailable, the animation of other attributes is ignored,

If attributes are followed! Important, this attribute is ignored,

If a key frame is repeatedly defined, the frame defined after the key frame is retrieved,

@-Webkit-keyframes identifier {from {top: 0;} 50% {top: 10px;/* This attribute is animated */background-color: red! Important;/* because there is! Important, so this entry will be ignored */text-align: center;/* because this attribute is not an animated attribute, it is also ignored */} to {top: 20px; color: red;} 100% {color: green;}/* because the to keyword represents 100%, this animation will only change the color to green, all attributes corresponding to are ignored */}

The number of frames ranges from 0% to 100%. If the frames do not belong to this range, they are ignored. (The key frame definition can be correctly executed without sequence, but is not readable );

Animation usage:

Animation-name: Specifies the animation name, which is the identifier followed by @ keyframe;

Animation-duration: Set the animation time, // these two are mandatory attributes, the first is not explained, and the second is required because the default value is 0 s, 0 s does not produce the animation effect, so it is required;

#demo {    animation-name:demo;    animation-duration:2s;}@keyframe demo {    from {top:0;}    to {top:20px;}}

 

Animation-timing-function: Set the animation speed curve. The default value is rotate. There are several optional values. You can use the cubic-bezr function to customize the animation speed, functions that can be used directly to transmit arrays;

# Demo {animation-function: cubic-bezr (0.25, 0.1, 0.25, 1);/* Custom besell curve */}

Animation-delay: sets the wait time before the animation starts. The default value is 0 s;

# Demo {animation-delay: 2 s;/* the animation will be executed after 2 s */}

Animation-iteration-count: specifies the number of animation executions. The default value is 1. The infinite keyword can be used to make the animation infinite loop;

# Demo {animation-iteration-count: infinite;/* the animation will be infinite and the animation-fill-mode will be invalid */}

Animation-direction: sets the reverse execution after the animation is executed. The default value is normal. Use the alternate keyword to enable reverse execution.

// It is activated only when the value of animation-iteration-count is greater than one time. The consumption time of reverse execution is the time set by animation-duration. The odd number of times is in the forward order and the even number is in the reverse order;

# Demo {animation-direction: alternate;/* activate reverse playback */animation-iteration-count: 2;/* This attribute must be greater than 1 for direction to be valid */}

Animation-play-state: sets the current state of the animation. The default value is running. It is the execution state and can be set to paused to pause,

# Demo {animation-play-state: paused;/* animation not triggered by default */} # demo: hover {animation-play-state: running; /* animation is executed only when the element is suspended */}

Animation-fill-mode: sets the state (restore (none) after the animation is executed to keep the first frame (backwards) and the last frame (forwards ), there is also a both value, MDN, that is, both backwards and forwards. Forgive me for not trying out the difference between it and forwards ...,)

// Setting the value of animation-iteration-count to infinite will invalidate this attribute;

The short description of animation has strict requirements on sequence. The specifications are as follows:

Animation: name duration timing-function delay iteration-count direction play-state fill-mode;

Note:

If transform is used in various prefixes... @ keyframe, a prefix is also required, for example:

@-webkit-keyframe demo {    from {-webkit-transform:rotate(7deg);}      to {-webkit-transform:rotate(14deg);}  }

Some references:

MDN Animation

Key Frames in CSS3

Animation attribute of W3School

@ Keyframe rules of W3School