Shulou(Shulou.com)06/01 Report--

This article focuses on "how to achieve CSS3 animation", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to achieve CSS3 animation"!

Let's take a look at the example.

Note:

Here, we use myfirst to name our animation, and then use the animation attribute to bind the animation name to div, and let div execute our animation. From--to, whose background color changes from red to yellow, stipulates that the completed animation is 5 seconds. The name and duration of the animation must be defined. If you omit the duration, the animation will not run because the default value is 0.

Tip:

When you create an animation in @ keyframes, bind it to a selector, otherwise the animation will have no effect. Specify that the animation properties of at least two CSS3 are bound to one selector:

Let's take a look at the animation defined by percentage:

Note: here we use percentages to specify animation changes.

This is a square running around in a rectangular track.

The rest is nothing, mainly some CSS3 animation attributes, let's take a look at:

1. @ keyframes: specify the animation. Is the name of the animation bound to the element, which is used to define the animation.

2. Animation: the abbreviated attribute of all animation attributes, except the animation-play-state attribute.

3. Animation-name: specify the name of @ keyframes animation. Generally speaking, it is simply abbreviated.

4. Aniion-duration: specify the seconds or milliseconds it takes for an animation to complete a cycle. The default is 0.

5. Animon-timing-function: specify the speed curve of the animation. Default is "ease".

This property has six values:

6. Animation-fill-mode: specifies the style to be applied to the element when the animation is not played (when the animation is complete, or when the animation has a delay that does not start playing).

This property also has six values:

7. Animation-delay: specify when the animation starts. The default is 0. A negative value means that the animation starts after skipping a few seconds.

8. Animation-iteration-count: specify the number of times the animation is played. The default is 1. Another value: infinite, which specifies that the animation should be played indefinitely (forever)

9. Animation-direction: specifies whether the animation is played in reverse in the next cycle. Default is "normal".

This property also has six values:

10. Animation-play-state: specifies whether the animation is running or paused. Default is "running". There are two property values:

Let's take a look at the animation formed by putting all these attributes together:

The animation is as follows:

Of course, you look at a lot of code, and once it's abbreviated, that's all:

Of course, we can achieve not only this single element of the animation track, as long as you can be familiar with the CSS3 animation, can achieve a lot of effects, let's take a look at the official case to achieve the trajectory animation of the nine planets.

It looks pretty cool, so CSS3 is very powerful, sometimes we can use CSS3 to complete the animation effect, we do not use js/jquery, in fact, it is very simple, it is nothing more than binding animation to HTML elements, and then adding time to the animation, the effect of movement, can be achieved, and finally check for compatibility.

At this point, I believe you have a deeper understanding of "how to achieve CSS3 animation". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.