About CSS3 's animation implementing frame-by-frames animation effects

Source: Internet
Author: User
This article mainly introduces the CSS3 animation to achieve the frame by animation effect, 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> 


The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.