Introduction to CSS3 animation and the use of animation library Animate.css

in this age, if you do not understand a little css3 knowledge, you are embarrassed to say that you are an artist. 　 Mei your sister, please call me the front-end engineer is not good. Uh.. All right, Siege corpse ... Hehe, as a siege corpse, no point of high-end atmosphere on the grade of things can do, then CSS3 animation is definitely worth your own, although IE9 and earlier versions of IE browser does not support CSS3 animation, but Ie6-8 browser is declining, using Google Chrome, Firefox browser, The number of browsers that support CSS3 animations, such as ie10+ browsers and mobile browsers, is getting more and more, so if it's easy to get a better user experience for some people, then why not?

Broadly speaking, CSS3 animation can be divided into two kinds.

Transition animations

The first is called Transition (transition) animation, which is the result of the transition from the initial state to the end state. The so-called state refers to the size, position, color, deformation (transform) and so on these attributes. CSS transitions can only define the first and last two states, so it is the simplest kind of animation.

To animate an element, you first define the various parameters of the animation with the transition attribute on this element. The parameters that can be defined are

Transition-property: Specifies which attribute to transition

Transition-duration: Define the transition time, default is 0

Transition-timing-function: Defines the easing effect of transition animations, such as fade in, fade out, and so on, by default is ease

Transition-delay: Specifies the delay time of the transition effect, that is, the animation starts after this time, the default is 0

For ease of writing, these four attributes can also be abbreviated on a transition property in the order above:

If this is the default value for the property, you can omit it:

Equivalent:

If you want to transition multiple properties at the same time, you can separate them with commas, such as:

Using the Transtion property only prescribes how you want the transition to occur, and you have to change the state of the element to make the animation happen. How to change the state of an element, of course, is to define a class for this element in CSS (: hover and other pseudo-classes), which describes the state of the element at the end of the transition animation.

Thus, when we move the mouse to the Div, the state of the div changes, we can see the width from 100 to 400, the height from 100 to 400, the background color from black to red, the transition time is 3 seconds transition effect.

In addition to using pseudo-classes provided by systems such as hover, we can define our own classes at will, and then add the class to the element by JS when we want to transition:

Key-Frame Animations

The second type is called Keyframe (keyframes) animation. Unlike the first transition animations, which define only two states, Keyframe animations can define multiple states, or, in the case of keyframes, transition animations can only define two keyframes for the first and last frames, while keyframe animations define as many keyframes as possible, thus enabling more complex animation effects.

Keyframe animations are also defined in a special way, using a keyword @keyframes to define animations. The specific format is:

@keyframes Animation Name {

Point in time {element status}

Point in time {element status}

...

}

For example:

This code defines an animation named Demo with 5 keyframes. 0%, 10%, etc. these represent the point of time, is relative to the duration of the entire animation, the time-point curly braces are the elements of the state attribute set, describing the state of this element at this point in time, when the animation occurs, is from the first state to the second state to transition, It then transitions from a second state to a third state until the last state. In general, 0% and 100% of these two keyframes are required to be defined.

KeyFrames are written in a flexible way, and one line can write multiple keyframes.

Even the spaces between them are not allowed.

Now that we know how to define a keyframe animation, how do we implement this animation? It's really simple, just bind the animation to an element that you want to animate.

To bind an animation to an element, we can use the animation property. The animation property has the following:

As in the previous transition properties, you can also abbreviate these animation properties to a animation, and you can omit them using the default values. However, the Animation-play-state attribute cannot be shortened to animation.

As long as you bind a well-defined animation to an element like this, you can animate the keyframe, rather than the first transition animation, which requires a state change to trigger the animation.

--------------------------------------------------------------------------------------------------------------- -----

Note that in order to achieve the best browser compatibility, you must also add the private prefixes of the major browsers when you actually write the code

Use of ANIMATE.CSS

Animate.css is a CSS3 animation library, you can go to GitHub to download, which presets a lot of commonly used animation, you can first see the demo on this page, the use is also very simple, because it is the different animation binding to different classes, so we want to use which animation, just need to simply put that corresponding class to add To the element:

First introduce the downloaded Animate.css file in the head

Then you want to animate which element, add the animated class and the specific animation class name to that element, and animated is the class that each element you want to animate must add.

Suppose you use jquery to add a rocking animation to an element with an ID of demo, because the animated class name is shake, so the code is:

This loads the elements into the page. You can also remove the animation class after the animation is complete so that you can do the same animation again.

As for the configuration parameters of the animation, such as the duration of the animation, the number of times the animation is executed and so on, you can define yourself on your element, overwriting the animate.css defined within the line.

Note These properties also remember to add the prefixes of each browser.

In short, is very flexible, in the end is not a CSS file, a look at it, you want to how the whole on the inside, do not want to use it to provide the class name, in the inside to get rid of the line. If you want to use only part of the animation, you can also be used to separate the animation, its official website also provides such a function.

Original: http://www.cnblogs.com/2050/p/3409129.html

Introduction to CSS3 animation and the use of animation library Animate.css