Css3 practices-image carousel (Transform, Transition and Animation ),

Css3 practices-image carousel (Transform, Transition and Animation ),

The landlord prefers visual enjoyment. Although it is always happy at the cost of performance incompatibility. This article uses demo demos to briefly understand Transform, Transition, and Animation in css3.

This article needs to achieve the following results :(Open it in chrome)

Transform

According to my understanding, like width, height, and background, transform is a dom attribute. The difference is that it is owned by css3, the ability to move, zoom, rotate, stretch, or stretch the original dom elements, similar to some APIs on the canvas. In this case, transform seems to be able to do something javascript can do.

Transform is divided into 2D transformation and 3D transformation. w3school has a good introduction and examples. For details, please press: CSS3 2D conversion CSS3 3D conversion.

For ease of searching, I saved one copy of w3school here:

Transition

Transition refers to transition. I understand the transition between css, but this transformation is very smooth, similar to animation. For example, the class of a dom is classA at the beginning and becomes classB after some operation (such as being clicked). If there is no transition, the transformation between classes is fast, mechanically completed in an instant, but with transition, this will be a very smooth process.

We use demo to explain how to use transition.

Write the following html file:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"></style>  

Opening is a very simple figure, with css:

img {  -webkit-transition: all 1s ease-in-out 0s;}img:hover {  -webkit-transform:     rotate(360deg)    scale(0.5, 0.5);  opacity: 0;}

The effect must be pushed: transition Transformation (Ps: none of the demos are compatible. Open it in chrome.)

Is it easy? In the demo, you only need to set the original attributes of the image (img tag) and the attributes of the hover. The transformation process in the middle is all done by transition! While the transition is added to an element (the demo transition is added to the img label), as if a listener is set, once the attribute value of this element is about to change, it will automatically check the set attributes in the transition. Once a match is found, a smooth transition will be performed.

Transition has four attributes. Syntax:Transition:Property Duration Timing-function DelayFrom the past to the last four attributes can be understood as "transition animation transform attributes", "transition time", "transition speed change", and "waiting time before transition" (default value: the first two are required, and the last two can be omitted ).

If not all attributes need to be smoothly transitioned, or the time and speed of each attribute transition have their own requirements, you can separate the attributes to be transitioned with commas. The demo can be written as follows:

img {  -webkit-transition:     -webkit-transform 1s ease-in-out 0s,    opacity 1s ease-in-out 1s;}img:hover {  -webkit-transform:     rotate(360deg)    scale(0.5, 0.5);  opacity: 0;}

If you have to separate the four attributes of transition, you can do this:

img {  -webkit-transition-property: -webkit-transform, opacity;  -webkit-transition-duration: 1s;  -webkit-transition-timing-function: ease-in-out;  -webkit-transition-delay: 0s;}

I put the last three attributes together and write only one value (because the values are the same). You can also separate the attributes with commas.

Here we will introduceTiming-function. Six values: (or w3cschool)

• Hover in transition

I believe that after transition is put into practice, it will be confusing whether transition is written directly on the selector or on the hover of the selector. It seems that the effect is the same. In fact, if the process before and after the hover is a inverse process, the two methods have the same effect, but if the effect is different before and after the hover, the transition must be added before and after the hover of the selector. For example, this demo: view the demo

That is to say, if the hover requires different effects, you can write two transition statements respectively. For example, when the mouse hover is set to 2 s, the hover is set to 5 s-> stamp demo.

Summary: Generally, transition is applied to dom class transformations. You can first write the mechanical transformations and then add the transition effect.

Animation

Animation is interpreted as an animated, enhanced version of transition.

If transition can achieve some js effects, animation is more like js. Similar to writing a canvas special effect, for example, how long is the special effect? We can specify the scenario where it should appear, while css3 is responsible for the conversion between different scenarios, keyframes defines a js method.

It is mainly applied to a certain element and requires n consecutive css transformations. A simple demo is as follows: animation

When creating an animation in @ keyframes, bind it to a selector; otherwise, no animation effect will be generated.

You can bind an animation to a selector by specifying at least two CSS3 animation attributes:

Demo code:

<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <style type =" text/css "> img {/*-webkit-animation: myfirst 5S; * //} @-webkit-keyframes myfirst {0% {-webkit-transform: rotate (0deg) scale (1, 1); opacity: 1;} 50% {-webkit-transform: rotate (360deg) scale (0.5, 0.5); opacity: 0.5;} 100% {-webkit-transform: rotate (0deg) scale (1, 1) translate (300px, 200px ); opacity: 1 ;}} img {-webkit-animation: myfirst 5S linear 0 s 1 alternate;/* Stop at the end position */-webkit-animation-fill-mode: forwards ;} </style> View Code

For more details, please stamp the CSS3 Animation

Specific Application: Image carousel

For similar applications, You can first write the code without transition, and then add a transition between class conversions.

This demo (automatic image carousel) has just a few lines of transition-related core code, while js simply assigns values to the element class, And the animation process is completely completed by css3!

img {  position: absolute;  -webkit-transition: all 2s ease-out;}.disappear {  opacity: 0;}.show {  opacity: 1;}

When the img class is converted from show to disappear or from disappear to show (class transformation under the img label), the transition animation of the transition setting is executed.

The implementation of another demo is similar. If you are interested, refer to the source code: the source code should be pushed.

Summary

In general, transform only adds some attributes to the dom. If it is used with transition or animation, it can complete some animation effects. I think transition should be used in many practical applications, it can be used with events such as pseudo classes or click.

The landlord does not have a deep understanding of the above. If there is any discrepancy, please also point out.

For more information, see the CSS3 Transitions, Transforms, and Animation introduction and application presentation.