About CSS3 Transition Transform animation properties

1,transition Property

Individuals are very accustomed to using transition over attributes, easy to use. Everyone calls him a simplified version of animation.

For example:

. contain{

width:392px;

position:relative;

Bottom: -20px;

opacity:0;}

. contain.on{

bottom:0;

Opacity:1;

Transition:all 500ms ease-out 2s;

-webkit-animation:all 500ms ease-out 2s;

-moz-animation:all 500ms ease-out 2s;

-ms-animation:all 500ms ease-out 2s;

-o-animation:all 500ms ease-out 2s;}

When a certain condition is met, add the. On class for contain, which can have an animated effect of "bottom up from transparent to solid" with a delay of 2s duration.

Grammar:

Property duration timing-function delay;

However, it is important to note that the last value of Firefox for transition is very strict, if the delay is 0 o'clock we tend to ignore the back of the S, then Firefox has no effect!

2,animation Property

The animation property is more flexible than the Transition property contains keyframes rules that explicitly control the properties of the current frame.

Example:

@keyframes guidedown{
0%,100%{background-position:0 -352px;}
50%{background-position:0 -360px;}
}
@-webkit-keyframes guidedown{
0%,100%{background-position:0 -352px;}
50%{background-position:0 -360px;}
}
@-ms-keyframes guidedown{
0%,100%{background-position:0 -352px;}
50%{background-position:0 -360px;}
}
@-moz-keyframes guidedown{
0%,100%{background-position:0 -352px;}
50%{background-position:0 -360px;}
}

. movediv{

Animation:guidedown 2s infinite;

-webkit-animation:guidedown 2s infinite;

-moz-animation:guidedown 2s infinite;

-ms-animation:guidedown 2s infinite;

-o-animation:guidedown 2s infinite;

}

Infinite refers to an infinite loop, and if only one is executed, only the animation-fill-mode:forwards can be qualified.

Grammar:

name Duration timing-function delay Iteration-count direction;

3,transform Property

Transform appears to be an animated property, in fact, is a static property, written to the style will only directly explicit, no change process. Its purpose is mainly for special deformations, defining a variety of static styles, and then using transition and animation to develop how to change attribute values to achieve animation effects.

The properties that change attribute styles are: Translate3d (3d position), Totate (rotation), skew (tilt), scale (zoom out), matrix (CSS matrix).

Grammar:

transform:none| transform-functions;

About CSS3 Transition Transform animation properties