CSS3 transitions, transforms and animation usage introduction and Application Showcase

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=1268

I. Preface and CATALOGUE Index

"Tianlong Eight" in the virtual bamboo small monk can be said to be the monk's advanced characters and representative model, all kinds of rules and regulations to keep in mind and strictly. But, later, the flower girl sent to the front, what the commandments have become a floating cloud, can not help but temptation to go to pleasure. Ah, I now seem to have a similar feeling, was not intended to delve into some of the properties of CSS3, but its effect and practical application of the value of the temptation is huge, or can't resist, toss this article. Costly project less the better, so, here simply put CSS3 animation related to a few properties together, so that, at least a year will not write related articles.

Several properties related to CSS3 animation are: Transition, transform, animation; I understand the transitions, transformations, animations, respectively. Although the meaning is similar, but the specific roles are different. It is like she combination, although all three girls, are singing the same song, but there are responsible for treble, and good at bass, specific work in the role or difference. //zxx: Looks like that who burns, really unfortunate ~ ~

Transition refers to the transition, that is, from point A to point B, like crossing the river ferry, there is time, is continuous, generally for the regular CSS properties; transform refers to the fixed properties: rotation, scaling, offset, etc. It is used independently of the distant relative transition, but the effect is very dry mechanically rotating movement. If you cooperate with the Transition property, the rotation is smooth. Animation first settled in the Safari browser, playing independently, and transition and transform have laosi sense, but to say singled out, animation than transition more powerful.

Catalog Index
1. Say transitions this fellow
2. Say transforms the goods
3. Say animation this thing
4. More practical and comprehensive effect display
5. Browser support situation
6. Reference articles and extended reading
7. Conclusion this thing

Second, say transitions this fellow

CSS3 transition attribute as early as last year my "CSS3 transition to achieve cool picture wall animation effect" in the article has been introduced. The effect is: smoothing the value of the CSS changes . Whether it is a click event, focus event, or mouse hover, as long as the value changes, is smooth, is the animation. As a result, as long as a whole station of the general class, it can be very easy to gradually enhance the animation effect, super practical value of the said.

Transition has the following specific properties:

Transition-property:*//Specify the nature of the transition, such as transition-property:backgrond, which means that backgound participates in the transition
transition-duration:*//Specifies the duration of this transition
transition-delay:*//Delay transition time
transition-timing-function:*//specifying transition types, with ease | Linear | ease-in | Ease-out | Ease-in-out | Cubic-bezier

For example, here's a very simple example:

. trans {    -webkit-transition-property:background-color;    -webkit-transition-duration:0.3s;    -webkit-transition-timing-function:ease;}. Trans:hover {    background-color: #486AAA;    Color: #fff;}

As a result, you can see the following effects in Safari or Chrome browser:

If you are using or have a WebKit core browser, you may click here: WebKit kernel browser Background color transition Demo

Just like the background property of CSS2, usually we will not be the same as above, the properties of transition one by one to write, but merge.

As in the above example, we will merge the transition attributes and extend several browsers with the following CSS code:

. trans {    ...    -webkit-transition:background-color 0.3s Ease;    -moz-transition:background-color 0.3s Ease;    -o-transition:background-color 0.3s Ease;    Transition:background-color 0.3s Ease;}. Trans:hover {    background-color: #486AAA;    Color: #fff;}

The following HTML code:

<a href= "/" class= "trans" > After I ~~</a>

The results are as follows (cut from opera 10.6 browser):

The Transition-timing-function property in transition lets people discord a bunch of ease-related values (linear | ease-in | Ease-out | Ease-in-out | Cubic-bezier), not so easy to understand and remember. In particular, the cubic-bezier refers to the Bezier curve, and the complex mathematical pull of the relationship, can't help to hook up the high school math nightmare.

In fact, the rationale for a reason, but also OK. First of all cubic-bezier this basically do not use birds, 99% of the situation is not used this thing, so, rarely idle, direct pass off. Linear very good to remember, linear. As for Ease-in | Ease-out | Ease-in-out, refers to the easing effect, the white is the beginning of the move slowly or at the end of the time to move slowly. So in and out that move slowly? Ah, we can associate memory, very good remember. We all know Ooxx bar, ease-in in is to indicate enter, when entering the time is obviously beginning is slow, wait for the aim to be ready to rush into quickly, so Ease-in Express first slow after fast, ease-out its out express, come out must be first fast after slow, Because come out when the speed of the near hole must come down, lest run out disorderly rhythm, so Ease-out said first fast after slow; Finally, very well understood, Ease-in-out said that one in a, that is, the first slow and fast again slow.

Some pure people may not understand the meaning of the above-mentioned evil words, it's okay, we can look at the diagram, the following sections from the different motion curves under the same time, from which you can see which first fast, which first slow (note: The final is the same time):

If you think the static table above is not specific enough, you can click here: different easing effects demo (Opera/chrome/safari)

You can observe the motion pattern of the block and know how the different easing names are performing.

The above is a brief introduction to transition, to see more detailed and authoritative information, you can go to the official page to view.

Third, say transform this goods

Transform refers to the transformation, people who have used Photoshop should know the Ctrl+t free transform inside. Transform refers to this thing, stretching, compressing, rotating, and shifting. See the following sample code:

. Trans_skew {Transform:skew (35deg);}. Trans_scale {Transform:scale (1, 0.5);}. trans_rotate {transform:rotate (45deg);}. trans_translate {transform:translate (10px, 20px);}

As a result, there are some effects like the following:

You can really click here: Transform some of the properties effects demo

Transform attribute If added transition transition characteristics, that can be more powerful, cherry wood Flower Road with the upper Chuan Feng Ah, can produce a lot of wonderful sparks, such as the following example, the key code is as follows:

. trans_effect {    -webkit-transition:all 2s ease-in-out;    -moz-transition:all 2s ease-in-out;    -o-transition:all 2s ease-in-out;    -ms-transition:all 2s ease-in-out;        Transition:all 2s ease-in-out;}. Trans_effect:hover {    -webkit-transform:rotate (720deg) scale (2,2);    -moz-transform:rotate (720deg) scale (2,2);    -o-transform:rotate (720deg) scale (2,2);    -ms-transform:rotate (720deg) scale (2,2);    Transform:rotate (720deg) scale (2,2);        }

As a result, chrome is expected to have a zoom rotation effect when the frog hangs in the browser under Safari:

When the mouse passes:

If you have a WebKit core browser, you can click here: Cool Zoom Rotation Animation Demo

Transform also support 3D transformation, how a cool word. For some ulterior reasons, it is not shown here. Therefore, the transform part to this end.

Four, saying animations this thing

As of November 2010, animations seems to work only on the WebKit core browser, so some of the demo effects in this paragraph need to be viewed under the WebKit core browser, not repeated.

The introduction of animations is driven by an instance. Let's look at a simple zoom extension animation instance:
You can fiercely click here: Animations horizontal elastic Zoom color Animation

The effect is roughly the following, the default is a very quiet rectangular box:

The mouse is moved up to show a slowly increasing width, and then suddenly the width increases quickly, while the background color deepens, under the animation process:

The key CSS code is as follows:

@-webkit-keyframes Resize {    0% {        padding:0;    }    50% {        padding:0 20px;        Background-color:rgba (206, 235, 0.2);            }    100% {        padding:0 100px;        Background-color:rgba (206, 235, 0.9);    }}. anim_box:hover {    -webkit-animation-name:resize;    -webkit-animation-duration:1.5s;    -webkit-animation-iteration-count:4;    -webkit-animation-direction:alternate;    -webkit-animation-timing-function:ease-in-out;}

In this example, the animation is performed only 4 times on mouse hover.

Animations not only applies to properties in CSS2, CSS3 is also supported, such as the Box-shadow box shadow effect, so we can achieve the outer glow effect. People who have used the Web QQ should have the impression that when the mouse moves to the head of the chat object there will be a blue glow animation, but that is the GIF animation image implementation (now automatically jump to the Web QQ 2.0 has not seen the effect). The effect of GIF animations is similar to the following (very compatible):

touch the left with rhyme

But GIF's reusability is limited and makes a lot of effort, if a few lines of CSS code can achieve high-performance and highly scalable effect is not even more, now animations can handle these.

You can fiercely click here: animations under the outer Glow animation demo

The glow effect is as follows:

The main CSS code is as follows:

@-webkit-keyframes Glow {    0% {        -webkit-box-shadow:0 0 12px Rgba (in a., 106, and 0.5);        Border-color:rgba (179, 214, 0.5);             }    100% {        -webkit-box-shadow:0 0 12px Rgba (106, 1.0), 0 0 18px rgba (0,, 255, 1.0);        Border-color:rgba (179, 214, 1.0);     }}. anim_image {    padding:3px;    border:1px solid #beceeb;    Background-color:white;    -moz-box-shadow:0 0 8px Rgba (106, 0.5);    -webkit-box-shadow:0 0 8px Rgba (106, 0.5);    box-shadow:0 0 8px Rgba (72, 106, 170, 0.5);}. Anim_image:hover {    background-color: #f0f3f9;    -webkit-animation-name:glow;    -webkit-animation-duration:1s;    -webkit-animation-iteration-count:infinite;    -webkit-animation-direction:alternate;    -webkit-animation-timing-function:ease-in-out;    }

Animation The end of the show, say ~ ~

V. More practical and comprehensive effect display

First, the mouse hover fade effect.

You can ruthlessly click here: Mouse hover fade in demo

Currently, the non-WebKit core browser, mouse hover is only transparent and opaque, only under the WebKit core browser to have a smooth animation effect, such as:

The relevant main CSS code is as follows:

. anim_fade_image {    position:absolute;    -webkit-transition:opacity 1s ease-in-out;    -moz-transition:opacity 1s ease-in-out;    -o-transition:opacity 1s ease-in-out;    transition:opacity 1s ease-in-out;}. Anim_fade_image:hover,. anim_fade_image_hover {    opacity:0;    Filter:alpha (opacity=0);}

Of course, we can also assist JavaScript, add Click Images Fade out. JavaScript is responsible for the end of the transparency value, the middle of the animation directly to the CSS.

You can click here: click on the Fade demo

Similar effect, do not show, code is similar, do not show the code.

Of course, we can also do some small animation, let the picture automatically fade in and out of the play, keep playing. To keep playing as long as the Animation-iteration-count set to Infinite (infinity) on the OK. So, we modified the following CSS code, as follows:

@-webkit-keyframes Fadeinout {    0% {        opacity:1;     }    25% {        opacity:0;    }    50% {        opacity:0;        }    75% {        opacity:1;    }}. anim_fade_image {    position:absolute;        -webkit-animation-name:fadeinout;    -webkit-animation-timing-function:ease-in-out;    -webkit-animation-iteration-count:infinite;    -webkit-animation-duration:12s;    -webkit-animation-direction:alternate;}

As a figure, the picture fades and fades. You are interested to click here: Image Unlimited auto Fade effect Demo

These effects are all related to transparency. The following example is linked to the picture position, proportional size, smart you think of the transform attribute it. Right, transform+tranisition, double swords, invincible. The following effect is cool and cool, which was basically visible only in flash. When when, you can ruthlessly click here: Picture Rotation zoom Display Animation demo (mouse through the picture there are surprises, non-webkit bypass, Sogou and other browsers can switch to high-speed mode can also).

The effect is as follows in the animation process:

The relevant core CSS code is as follows:

. anim_image {    -webkit-transition:all 1s ease-in-out;    -moz-transition:all 1s ease-in-out;    -o-transition:all 1s ease-in-out;    Transition:all 1s ease-in-out;    Cursor:pointer;}. anim_image_top {    position:absolute;    -webkit-transform:scale (0, 0);    opacity:0;    Filter:alpha (opacity=0);}. Anim_box:hover. Anim_image_top,. Anim_box_hover. anim_image_top {    opacity:1;    Filter:alpha (opacity=100);    -webkit-transform:scale (1, 1);    -webkit-transform-origin:top right;        }. Anim_box:hover. Anim_image_bottom,. Anim_box_hover. Anim_image_bottom {    -webkit-transform:scale (0, 0);    -webkit-transform-origin:bottom left;}

The HTML code is as follows:

<div id= "Testbox" class= "Anim_box" >        </div>

Of course, the transform rotation is applied here, and the horizontal vertical scaling effect is also great, as shown in:

You can fiercely click here: Picture Rotation Toggle Animation Demo

The CSS code is the same as the example above, it is not shown here, you can go to the demo page to view.

Below, we show a more practical and more realistic example of tab switching .
Our usual tab switch is basically very blunt, direct PA PA, switch over, no point transition ah what (after all, write JavaScript animation cost higher), now, with transitions, to achieve the transition effect is a few lines of CSS code things, not much to say, directly on the instance.

You can really click here: Smooth tab Toggle Demo

In the demo, click on the following a few picture text button-like things, you can see the picture horizontal slide over, and then slide over, and then slide over, let people love it. For:

The CSS is the Transition property with the value starting with all, as follows:

. trans_image_box {    width:2000px;    height:300px;    -webkit-transition:all 1s ease-in-out;    -moz-transition:all 1s ease-in-out;    -o-transition:all 1s ease-in-out;    Transition:all 1s ease-in-out;}

The TRANSITIONCSS code group is very open to eating.

As long as the CSS value of the transformation, as long as the additional transition property settings, are smooth effects, are animated. So, let's look at how to animate the classic accordion transition.

You can click here: the Accordion effect Demo (click on the horizontal title to have a surprise)

Below is:

Where JavaScript plays a role is only variable height value, animation, CSS is a person burden completed, great. The following code is the CSS code on the section div of the animation effect:

. acco_content {    height:0;    padding:0 10px;    -webkit-transition:all 1s ease-in-out;    -moz-transition:all 1s ease-in-out;    -o-transition:all 1s ease-in-out;    Transition:all 1s ease-in-out;    Overflow:hidden;}

The role of JavaScript is only to change height:

$$ (". Acco_title"). Click (function () {    var rel = This.lang, cl = this.classname, oon = $$ (". acco_title_on") [0], rel_on = Oon.lang;    if (!/on/.test (CL) && rel && rel_on) {        $$ ("#" + rel) [0].style.height = "140px";        $$ ("#" + rel_on) [0].style.height = "0";        This.classname = "Acco_title acco_title_on";        Oon.classname = "Acco_title";    }});

Vi. browser Support CSS Transitions

First introduction

• Safari 3.2:13/11/2008
• Firefox 4.0:late 2010
• Chrome 1.0:02/09/2008
• Opera 10.5:02/03/2010

CSS 2D Transformations

First introduction

• Safari 3.2:13/11/2008
• Firefox 3.5:30/06/2009
• Chrome 1.0:02/09/2008
• Opera 10.5:02/03/2010
• Internet Explore 9:09/2010

CSS Animations

First introduction

• Safari 4.0:11/06/2008
• Chrome 1.0:02/09/2008

CSS 3D Transformations

First introduction

• Safari 4.0:11/06/2008
• chrome:28/08/2010

Vii. reference articles and extended reading

• Understanding CSS3 Transitions
• Using CSS3 transitions, Transforms and Animation Intro
• W3c:css Transitions Module Level 3
• W3c:css 2D Transforms Module Level 3
• W3c:css 3D Transforms Module Level 3
• W3c:css animations Module Level 3
• Surfin ' Safari (check the archives)
• CSS3 transitions Support in Opera Presto 2.3