Learning CSS3 Animation (animation)

CSS3 is a lot of big on the function, 3D effect, animation, multi-column and so on. Write an article today to record how to write an animation with CSS3.

Ugly words still have to say, IE9 and the following version does not support CSS3 animation (if you really want to implement can consider using JS, but the effect is not very good). Chrome and Safafi suggest adding the prefix-webkit-to forward-compatible older versions.

Do a simple animation today.

First, simply draw a div and then add the background image.

            I'm the demo.    

. demo{    width:120px;    height:120px;    margin:100px Auto;    Background:url (img/demo.jpg) no-repeat;}

An ordinary div comes out like right:

And then we let it move.

First, write a method that describes how the picture should move.

@keyframes run_animation{from          {        Transform:rotatez (0deg);    }    to {        Transform:rotatez (360deg);    }}

This animation_run is the name of the method. Wait for the name to be associated with the relevant element.

From is the starting state of the animation, and to is the end state of the animation.

So the method is to make an element rotate 360 degrees clockwise, very simple.

The from-to often does not meet our daily development needs, so there is this writing

@keyframes run_animation{    0%{
Transform:rotatex (0DEG);
}    16%{        transform:rotatey ( -90deg);    }    33%{        Transform:rotatey ( -90deg) Rotatez (135deg);    }    50%{        Transform:rotatey (225deg) Rotatez (135deg);    }    66%{        Transform:rotatey (135deg) Rotatex (135deg);    }    83%{        Transform:rotatex (135deg);    }
100%{
Transform:rotatex (0DEG);
}}

This description allows the animation to have a more colorful and cool action. The dynamic of the element in each stage is described by a percentage, and 0% is the from,100% that is said to. Actually, it's simple, right?

The animation is so easy to write well. Next, we'll link the animations to our images.

. demo{    width:120px;    height:120px;    margin:100px Auto;    Animation:run_animation 12s linear infinite; /* Associate Animation name, define animation duration, animation play speed curve, play count *    /Background:url (img/demo.jpg) no-repeat 100%;}

Just so simple a code, the picture can be moved in accordance with the method we define.

If you now find that the animation is not moving, it may be one of the following reasons:

1. The name of the animation does not match the name defined by @keyframes;

2. No animation is defined, the default is 0S, that is, the animation is not played. The above code defines 12S;

3. IE9 and the following browsers to run the code, IE9 and below do not support CSS3 animation;

4. The animation method is not defined, and the style is the same in each stage of the method definition. Like this.

@keyframes run_animation{    0%{        Transform:rotatez (90deg);    }    50%{        Transform:rotatez (90deg);    }   100%{        Transform:rotatez (90deg);    }}

Well, this time the animation should be moving up. Then say the other options in the animation:

1.animation-iteration-count: The number of animation plays, want to play a few times to write a few. I've used an infinite number of times here, infinite.

2.animation-timing-function: Animation speed curve. This speed curve is a bit complicated and involves a Bessel function. Do not want to delve into Bézier directly with ready-made linear, ease, ease-in, Ease-out, Ease-in-out. If you understand Bessel, you can use Cubic-bezier (n,n,n,n), this relatively tall, I think it is the weapon of the force of the world.

3.animation-delay: Animation can be delayed playback, parameter is also n S. Unlike Animation-duration, Animation-duration is the duration of the animation.

The above properties can be shortened to animation, just like the chestnuts above me.

There are reverse play, pause these properties will not say, there is a need to see http://www.w3school.com.cn/css3/css3_animation.asp or

Https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animation

