CSS3 animation mechanism principle and actual combat

This period of time like the CSS3 animation effect, about this everyone has different views, in my personal opinion css3 in doing some small page animation effect or very useful, some simple small animation if you use JS, it is wasteful.

If bigger, the best combination of JS+CSS3, so that both the efficient control of JS, but also CSS3 operation effect.
No more nonsense, let's take a look at the specific operation

The first thing to know about CSS3 's animation principle and basic Operation properties

People who have done flash or animated gifs know that the effect of animation is nothing more than a picture, a keyframe, and a time-action composition.

The first is to understand the @keyframes rules (that is, the CSS3 to do the animation of a specified name) definition and usage

By @keyframes rules, you can create animations.

The animation is created by gradually changing one set of CSS styles to another.

You can change this set of CSS styles several times during the animation process.

The time at which the change occurs is specified as a percentage, or by the keyword "from" and "to", equivalent to 0% and 100%.

0% is the start time of the animation, and the end time of the 100% animation.

For best browser support, you should always define the 0% and 100% selectors.

Note: Use the animation properties to control the appearance of the animation, while binding the animation to the selector.

Grammar

Animationname {keyframes-selector {css-styles;}}

The name of the Animationname animation
Keyframes-selector Percentage of animation duration (0%-100% is a valid value)

Css-styles; one or more legitimate CSS style properties
Example

<style>
Div
{
width:100px;
height:100px;
background:red;
position:relative;
Animation:mymove 5s Infinite;
-moz-animation:mymove 5s Infinite; /* Firefox */
-webkit-animation:mymove 5s Infinite; /* Safari and Chrome */
-o-animation:mymove 5s Infinite; /* Opera */
}

@keyframes Mymove
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}

@-moz-keyframes mymove/* Firefox */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}

@-webkit-keyframes mymove/* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}

@-o-keyframes mymove/* Opera */
{
0% {top:0px;}
25% {top:200px;}
75% {top:50px}
100% {top:100px;}
}
</style>

And then we need to understand that the animation property is the CSS3 definition of the animated thing.

Definition and usage

The animation property is a shorthand property for setting six animation properties:

• Animation-name
• Animation-duration
• Animation-timing-function
• Animation-delay
• Animation-iteration-count
• Animation-direction

Note: Always specify the Animation-duration property, otherwise the duration is 0 and the animation will not play.

JavaScript syntax: object.style.animation= "Mymove 5s Infinite"

CSS3 animation mechanism and actual operation