"CSS3" transition transitions and animation animations

Transferred from: http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135

written in the previous words:

Recently wrote CSS animation found tansition and animation confused, and found that two animation superimposed on an element after the animation effect is not, the last thing to think is to pack a layer of elements inside, the two animation separate on different elements, so that the animation effect is not affected. On the internet to find a tansition and animation difference:

First, transition

CSS3 's transition function is like a butter, which makes some changes to the CSS smooth. Because native CSS transitions require more resources to be processed on the client than with JavaScript and flash, they are smoother.

properties of the transition

Attributes can be written separately, or can be put together to write, such as the following code, the image of the width of the height of the original is 15px, want to let it 1 seconds to transition to the width of 450px, through: hover to trigger, then the code can be as follows:

1 img{2 Height:15px;3 width:15px;4 transition:1s 1s height ease;/*Close together*/5}6 or:7 img{8 height:15px;9 width:15px;Ten Transition-property:Height; One transition-duration:1s; A Transition-delay:1s; - transition-timing-function:Ease;/*attributes are written separately*/ -} the Img:hover{ - Height:450px; - width:450px; -}

Because the transition takes time and the transition delay is in seconds, the first time resolves to transiton-duration and the second resolves to transition-delay when the Transition property is written together. So, you can give transition a shorthand method.

Transiton: Transitional attribute transition requires time transition animation function transition delay time;

attribute DetailsTransition-property

Not all properties can transition, only the attribute has an intermediate point value to have a transition effect. For a complete list, see this list for specific effects, see this page.

transition-duration

Specifies the time it takes to transition from one property to another. The default value is 0, which is 0 o'clock, which indicates that the change is instantaneous and the transition effect is not visible.

transiton-timing-function

The transition function has the following types:

Liner: Constant speed ease-in: deceleration ease-out: Acceleration ease-in-out: First acceleration and deceleration cubic-bezier: three times Bezier curve, can be customized click here

Click here: http://cubic-bezier.com/#.06,.88,.84,.24

Triggering transitions

Simple code does not trigger any transition operation, it needs to be triggered by the user's behavior (such as click, hover, etc.), which can be triggered in the following ways:
: hoever:focus:checked media query triggers JavaScript trigger

Limitations

The advantage of transition is that it is easy to use, but it has several great limitations.
(1) Transition requires event triggering, so it can't happen automatically when the page is loaded.
(2) Transition are disposable and cannot be repeated unless triggered repeatedly.
(3) Transition can only define the start and end states, and cannot define an intermediate state, that is, there are only two states.
(4) A transition rule that defines only one property change and cannot involve multiple attributes.
CSS animation is to solve these problems and put forward.

Second, animation

CSS3 's Animation property allows for more complex animation effects by controlling keyframes to control every step of the animation, just like Flash animation. The Ainimation animation effect is composed of two main parts:

1) Declare an animation by a frame similar to the one in Flash animation;
2) The animation of the Keyframe declaration is called in the animation property.

Note:The animation property has been supported by most browsers in its current location, but you need to add a browser prefix! Need to add a browser prefix Oh! Need to add a browser prefix Oh!

Animation Animation Properties

or the first table to illustrate the attributes, you will feel more clear:

(1) Animation-name:none is the default value, there will be no animation effect, it can be used to overwrite any animation
(2) Animation-duration: The default value is 0, which means that the animation period is 0, that is, there is no animation effect
(3) Animation-timing-function: Same as Transition-timing-function
(4) Animation-delay: The time to wait for the animation to start
(5) Animation-iteration-count: Defines the number of times the animation is played, the default is 1, and if it is infinite, the loop plays indefinitely
(6) Animation-direction: The default is Nomal, each cycle is forward, (0-100), another value is alternate, the animation plays an even number of times to play forward, if the radix word in the opposite direction play
(7) Animation-state: Default is running, play, paused, pause
(8) Animation-fill-mode: Defines the action that occurs before and after the start of the animation, the default value is None, and the end of the animation when the animation does not start when the state of the forwards, after the end of the animation continues to apply the position of the last keyframe, that is, saved in the end state ; backwards, let the animation return to the state of the first frame; both: Apply forwards and backwards rules in turn.

@keyframes

CSS3 's animation animation effect mainly consists of two parts: 1. Declare an animation with KeyFrames, 2. The animation that is declared in the animation call Keyframe.

@keyframes is the keyframe. This frame is similar to a frame in flash and can have many frames in an animation.

A style rule in a @keyframes is made up of a number of percentages that can be created on this rule to achieve an ever-changing effect. In addition, the @keyframes must be prefixed with WebKit . As an example:

1 Div:hover{2 -webkit-animation:1s changecolor;3 Animation:1s changecolor;4}5 6 @-webkit-keyframes ChangeColor{7 0% {background:#c00; }8 50%{background:Orange; }9 100%{background:Yellowgreen; }Ten } One @keyframes ChangeColor{ A 0% {background:#c00; } - 50%{background:Orange; } - 100%{background:Yellowgreen; } the }

The 0% 100% percent sign in the above code cannot be omitted, 0% can be replaced by from, and 100% can be replaced by. To make an ChangeColor animation work, you must call it through the Css3animation property.

difference

The animation property is similar to transition, and they all change the attribute value of the element over time, and the main difference is that transition needs to trigger an event to change its CSS properties over time, animation without triggering any events. You can also change the element CSS properties explicitly over time to achieve an animated effect.

I made a small example, using animation to simulate PPT playback, realized from the left into, from the top into, zoom in, zoom out and rotate. Address: here

CSS3 transition transitions and animation animations