【css3】Learn about Transform, Transition and Animation through image carousel_html/css_WEB-ITnose

The author likes to pursue visual enjoyment, although he often sacrifices performance and incompatibility, but he still enjoys it. This article will briefly understand Transform, Transition and Animation under CSS3 through demo demonstrations one by one.

This article needs to achieve the effect: (Please use chrome to open )

Picture carousel

Automatic picture carousel

Transform

According to my understanding, transform, like width, height, and background, are all attributes of dom. The difference is that it is under css3. Compared with ?, it can move, scale, rotate, and adjust the original dom elements. Stretching or stretching is similar to some APIs on canvas. It seems that transform can do something that can only be done by js.

Transform is divided into 2D transformation and 3D transformation. There are good introductions and examples in w3school. For details, please click: CSS3 2D transformation CSS3 3D transformation

In order to facilitate the search, I put the Save a screenshot here:

Transition

The explanation of transition is transition. My understanding is the transformation between CSS, but this transformation is very smooth. Similar to animation. For example, the class of a certain DOM is classA at the beginning, and after some operation (such as being clicked), it becomes classB. If there is no transition, the transformation between classes is very fast, and it is completed instantly like a machine. However, With transition, this will be a very gentle and 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>  <img  src='http://hanzichi.github.io/img/img0.png' / alt="【css3】Learn about Transform, Transition and Animation through image carousel_html/css_WEB-ITnose" >

It opens to a very simple picture, add css:

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

Please click on the effect: transition transformation (ps: All demos are not compatible, please use chrome to open it )

Is it very simple? In the demo, you only need to set the original attributes and attributes of the image (img tag) after hovering, and the transition process is all handled by transition! The transition is added under a certain element (the transition of the demo is added under the img tag), as if a listener is set. Once the attribute value of the element is about to change, the set attributes in the transition will be automatically checked. Once If a match is found, a smooth transition will be made.

Transition has 4 properties, syntax: transition: property duration timing-function delay The 4 properties from front to back can be understood as "transition animation transformation properties" ", "Transition time spent", "Speed ​​change of transition process" and "Waiting time before transition starts" (default value: all 0 ease 0 The first two are required and the last two can be omitted).

If not all attributes need to be smoothly transitioned, or each attribute transition time, speed and other settings have different requirements, you can separate the attributes to be transitioned with commas, and the demo can be written as:

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 write the four attributes of transition separately, 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 just After writing a value (because the values ​​are the same), you can also write them separately like properties, separated by commas.

Here we will introduce the value of timing-function. Six major values: (still stolen picture w3cschool)

Summary: Generally, transition is used in dom class transformation. You can write the mechanical transformation first, and then add the transition effect.

Animation

The explanation of Animation is animation, an enhanced version of transition.

If transition can achieve certain js effects, animation is more like js. Similar to writing a canvas special effect, the total time of the special effect, for example, we can specify when and what kind of scene should appear, and the conversion between each scene is completely responsible for CSS3 itself, and keyframes are like defining a js method.

Mainly used when a certain element requires n consecutive css transformations. A simple demo is as follows: animation

When we create animation in @keyframes, please bind it to a selector, otherwise the animation effect will not be produced.

You can bind an animation to a selector by specifying at least two of the following CSS3 animation properties:

Specify the name of the animation

Specify the duration of the animation

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 0s 1 alternate;    /*停在结束位置*/    -webkit-animation-fill-mode: forwards;  }</style>  <img  src='http://hanzichi.github.io/img/img0.png' / alt="【css3】Learn about Transform, Transition and Animation through image carousel_html/css_WEB-ITnose" >

For more information, please click CSS3 animation

Specific application: Image carousel

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

The demo (automatic image rotation) has only a few lines of core code related to transition, while js simply assigns values ​​to the elements’ classes, and the animation process is all 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 tag), the transition animation set by the transition will be executed.

The implementation of the other demo is also similar. If you are interested, you can refer to the source code: Please click on the source code

Summary

Generally speaking, transform just adds some attributes to the dom, and if combined with transition or animation, some animation effects can be achieved. I think transition is more commonly used in practice, and can be used with pseudo-classes or click events.

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

If you want to know more, you can refer to this article Introduction and Application Demonstration of CSS3 Transitions, Transforms and Animation