CSS3 animation Implementing a frame-by-picture animation effect Sample Introduction

This article mainly introduces the CSS3 animation implementation of the frame by animation effect example, with a certain reference value, interested in small partners can refer to

CSS3 inside of the animation property is very powerful, but their use of relatively few, the recent interview just happened to be asked, while now there is time to do a small summary of animation. Simultaneously implement a frame-by-animation demo as an exercise

Animation properties at a glance

Because the animation property is more, and then in the world of a little egg pain, simply also made a map, later want to see, on a glance

Use animation to animate frames per frame

Familiar with the properties of the animation, you have to find a simple small project implementation, frame-wise animation is very interesting, first run to meet their own
The idea is simply to give the element a sprite chart background and then add the frame animation to change background-position, the key code:

@keyframes run{       from{           background-position:0 0;       }       to{           background-position: -1540px 0;       }   }   p{       width:140px;       height:140px;       Background:url (run.png);       Animation-name:run;       Animation-duration:1s;       Animation-iteration-count:infinite;   }

But after running, we found that the frame animation between each frame is sliding, not the effect we want, for what?
The original animation by default in ease way, it inserts the motion tween between each keyframe, so the animation effect is consistent
Know the reason is good to do, the solution to the idea is:

@keyframes run{       0, 8%{/  * Action one */  }       9.2%, 17.2%{/  * Action two */  }       ...   }

Step1: Stay between Actions 8 frames, 0% set action one, action one end in 8%

Step2: Transition between actions 1.2 frames, 9.2% set action two, action two ends at 17.2%

Full code:

<! DOCTYPE html> 

There is another way to achieve this, is to use steps (), is the frame between the order of the movement of the picture, this is not written in the book, first put a picture


By:

Steps (1,start): The animation jumps to 100% at the beginning until the end of the frame (not the entire cycle)
Steps (1,end): maintains a 0% style until the end of this frame (not the entire cycle)

Alternatively, you can set the Animation-timing-function:step-start/step-end directly
Step-start effect is equivalent to steps (1,start), step-end effect is equivalent to steps (1,end)

The final effect, because the recording problem may be a bit of a lag, interested students can directly copy the code to run down:

Full code:

<! DOCTYPE html>