How to animate using CSS3

This article mainly introduces the simple example of CSS3 animation, especially the situation that realizes a dynamic expression like this one is very to force ~ need friend can refer to under

CSS3 greatly enhances the ability to animate, but choosing GIF is still a good choice if you want to make a more complex pattern of animations. Today we will introduce a method that uses CSS animation with sprite (CSS sprite) to make animations similar to GIF animations.
CSS3 Animation Steps function

First look at the compatibility of CSS3 animation. You can see that basically mainstream browsers support the animation property, and Chrome, Safari, Opera, and mobile browsers are supported with the prefix.

Using sprite diagram to animate uses an important function steps inside the CSS3 Animation.

The animation itself is a composite property that contains the Animation-name,animation-timing-function,animation-iteration-count,animation-direction A animation-play-state,animation-fill-mode of six properties.

Steps is a function that belongs to Animation-timing-function.

Animation-timing-function usually we use more is the default of some animation curve value ease, ease-in and so on. Steps can be divided into how many parts of the animation we control.

Steps (N,[start|end]) passed in one or two parameters, the first parameter means to divide the animation into n equal, and then the animation will run on average. The second entry The default value is start, which runs from the beginning of the animation, instead, end represents the end of the animation.

So, the idea of animating with Sprite and steps functions is that the sprite contains every frame of the animated picture, and then uses the steps function to determine the number of frames that the animation is running in a fixed time, which is equal to the animation's frame count, thus animating the effect.
Animated instances

Use the wretched bunny as an example ╮ (￣▽￣ ") ╭

First we want to cut the picture and cut each frame of the animation into such a diagram:

If you do not want to toss, it is recommended to merge the sprite Chart tool online.

Then write KeyFrames.

@-webkit-keyframes Tuski {       0% {           background-position:0;       }       100% {           background-position: -576px 0;       }   }   @-moz-keyframes Tuski {       0% {           background-position:0;       }       100% {           background-position: -576px 0;       }   }   @keyframes Tuski {       0% {           background-position:0;       }       100% {           background-position: -576px 0;       }   }

Invoke animation

#tuski {       -webkit-animation:tuski. 5s Steps (infinite);       -moz-animation:tuski. 5s steps (infinite);       Animation:tuski. 5s steps () infinite;   }

Compared to GIF, this animation allows us to manually adjust the speed of the animation to run.

Done.

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!