Introduction to the usage of transition and animation in CSS3

Before CSS3, animations on a Web page were implemented by JavaScript, and in this era you might see such snippets of code:

SetTimeout (Funcntion () {
document.getElementById ("Test"). Style.opacity + 0.1;
}, 300)
The above code fragment implements the transparency gradient for the content described by this ID.

This is more complex to write, and the maintainability is poor. In addition, the performance on the mobile side is also very urgent.

CSS3 Times

The Stone Age has finally passed, the dawn has come, the CSS3 animation effect also comes.

The common properties of animation in CSS3 are transition and transform.

Transition

Chinese explanation: "transition". The most basic scenario is: the hover transition:

. box {
width:100px;
height:200px;
background:red;
Transition:all 1s ease;
}
. box:hover {
width:200px;
height:100px;
Background:yellow;
}
JS Bin on jsbin.com

The above code implements a simple transition effect, involving its width, height, background, transition time 1s, transition mode ease, triggering when hover.

Transition this attribute has four parameters: property duration timing-function delay;. Separate code transition properties, delay time, transition method function, transition delay.

That

Transition:property duration timing-function delay;
The following points need to be noted:

Property This position is not able to write all the attributes, such as display is not the case. This is because of the need to use the property to calculate the transition of the various pointers, such as display this does not have a clear value tag is absolutely impossible to achieve results.

Timing-function is a magical thing, and if you have ever touched a Bezier curve, you must know the secret. Its existence will make your transition effect is not so blunt, whether it is fading or other complex transition effect, he can smooth processing. In general, we use commonly used ease, ease-in, ease-out, linear can meet most of the needs, if you have a higher demand, can be customized through the http://web.chacuo.net/css3beziertool.

Delay represents a delay, that is, the delay time at which the animation begins

If you want to implement multiple animations, such as the first size changes, and then the background color changes are also possible. For example: transition:width 1s ease, background 1s ease 1s;

In practical terms, using: hover to trigger animations is often not particularly practical. In general, we tend to trigger animations by adding or removing class in actual development.

<div id= "box" ></div>

#box {
width:100px;
height:200px;
Background:yellow;
}
. Red {
width:200px;
height:100px;
background:red;
}

Window.onload = function () {
settimeout (function () {
document.getElementById ("box"). ClassName = "Red";
}, 100)
}
JS Bin on jsbin.com

With transform, you can achieve a more cool animation.

JS Bin on jsbin.com

In addition to the above simple rotation, but also to achieve a more practical effect:

TAB Toggle "Background color" slide

<div class= "box" >
<div class= "box-content" id= "Box1" ></div>
<div class= "box-content" id= "Box2" ></div>
<div class= "Box-switch" id= "Box-switch" ></div>
</div>

. box {
height:100px;
width:300px;
}
. box {
position:relative;
}
. box-content {
Display:inline-block;
height:100px;
width:140px;
border:1px solid red;
Cursor:pointer;
}
. box-switch {
Position:absolute;
left:1px;
top:1px;
height:100px;
width:140px;
Background:green;
Transition:. 15s ease-out;
Transform:translatez (0); Turn on hardware acceleration
}
. box-switch-on {
left:147px;
}

Window.onload = function () {
var _box1 = document.getElementById ("Box1"),
_box2 = document.getElementById ("Box2");

var _box_switch = document.getElementById ("Box-switch");

_box1.addeventlistener (' click ', function () {
_box_switch.classname = "Box-switch";
}, False);

_box2.addeventlistener (' click ', function () {
_box_switch.classname = "Box-switch box-switch-on";
}, False);

}
The effect is as follows:

JS Bin on jsbin.com

Remember to do the animation do not forget to turn on hardware acceleration, or on the mobile device may have performance problems, a more detailed introduction see the desktop and mobile end with CSS to turn on hardware acceleration

If you are not in order to be compatible with low-level PC browsers, it is best not to use left this way, because this may cause rearrangement (reflow/relayout), please use Transform:translatex (147PX); In this way. Related discussions see the benefits of using transform:translate instead of the top left Marg at the mobile end. , thanks @banbanchs

For more detailed transform introduction, you can see "Well, CSS3 3D transform transform, that's all."

Animation

The above mentioned transition to achieve the animation is undoubtedly very elegant, but the realization of the type of animation is still limited, then how to achieve more arbitrary animation? This time may need animation's appearance.

Animation is still very simple, it requires you to declare the animation execution time and animation function can be performed:

. box {
width:100px;
height:200px;
background:red;
}
. box:hover {
Animation:1s Rainbow forwards;
}

@keyframes Rainbow {
50% {
width:200px;
Background:yellow;
}
100% {
height:100px;
Background:green;
}
}
For more detailed animation introduction, see "Introduction to CSS Animation"

What's wrong with Vue?

In the mv* framework, the DOM is not recommended for direct manipulation, and in general, it provides some of its own framework interfaces, such as Vue:

Transitional-vue Chinese Document

I've made some hooks for show v-for, and we can use these hooks to implement related animations in conjunction with the lifecycle.