Summary of new features of CSS3 (Transition)_html/css_WEB-ITnose

CSS transition , which is part of the CSS3 specification, is used to control the rate of change of CSS properties. You can let the property change process last for a period of time instead of taking effect immediately. For example, if you change the color of an element from white to black, this change usually takes effect immediately. After using transition, it will change at a curve rate. This process can be customized.

Transition is a shorthand property, the order of four values ​​(used alone plus transition-prefix):

　property

　duration

　timing-function

　delay

Transition is to complete the change of a certain property value within a certain period of time, so transition-duration must be set because its default value is 0;

Transition-Property:

The attribute value to be transitioned. Only the specified attribute will produce animation effect when transitioning. You can fill in all, all is all animatable attributes;

#demo {    width:20px;    height:20px;    background-color:#0080FF;    transition:width 1.5s;}#demo:hover {    width:30px;    height:30px;}

It will only animate the change of width ↓

You can select the value of multiple attributes;

#demo {    width:20px;    height:20px;    background-color:#0080FF;    transition-property:width , height;/*写多个值用逗号分割*/    transition-duration:2s;/*过渡持续时间可以只写一个,也可分别指定,同样用逗号分割*/}

Specify when using abbreviation Multiple attributes:

#demo {    width:20px;    height:20px;    background-color:#0080FF;    transition:width 2s, height 4s;/*两条定义之间用逗号分割,后两个值为选填.*/}

There are a few things to note when using sub-attributes:

#demo {    transition-property:width , height , top;    transition-duration:2s , 3s;/*定义时间个数少于属性个数,会再次循环数组*/}/*相当于*/#demo {    transition-property:width , height , top;    transition-duration:2s , 3s , 2s;}

#demo {    transition-property:width , height;    transition-duration:2s , 3s , 2s;/*定义时间个数多于属性个数,多出的值会被截取*/}/*相当于*/#demo {    transition-property:width , height;    transition-duration:2s , 3s;}

Transition-duration:

Set the transition duration, which can be seconds or milliseconds. I understand that transition is to calculate the corresponding attribute value change curve through the set duration combined with the easing function;

For example, the width transitions from 100px to 200px within 4 seconds, which is simply divided into 4 frames (assuming) 125px-150px-175px-200px; the principle should be similar to animation’s from to;

The transition lasts 2s

Transition lasts 4s

Transition lasts 8s

Transition-timing-function:

Settings Transition animation curves, here is an example from W3School, which uses several commonly used animation curves built into the browser. It can also be customized through cubic-bezier(n,n,n,n), n It is a value between 0-1;

A quite complete set of easing functions. When not set by default, it is ease, which starts slowly, then becomes faster and ends slowly;

Transition-delay:

Set the waiting time before the animation starts (default is 0, no delay);

Stretch after hovering the mouse for 2 seconds

Summary:

Use Transition to make the page look more dynamic. Here is a simple example of a button;

Hover me Hover me

.demo-button {  border:0px;  background-color:#2aaacb;  position:relative;  padding:0.7em 1.8em;  font-size:1.1em;  border-radius:3px;  margin-right:2em;  color:#fff;  -webkit-transform: translateZ(0);  transform: translateZ(0);}.demo-button:before {  content: "";  z-index:-1;  position: absolute;  width: 100%;  height: 100%;  background-color: #3BD1F8;  top: 0;  left: 0;  -webkit-transition-property: transform;  transition-property: transform;  -webkit-transition-duration: 0.3s;  transition-duration: 0.3s;  -webkit-transition-timing-function: ease-out;  transition-timing-function: ease-out;}#transition-demo1:before {  -webkit-transform: scaleY(0);  transform: scaleY(0);}#transition-demo1:hover:before {  -webkit-transform: scaleY(1);  transform: scaleY(1);}#transition-demo2:before {  -webkit-transform: scaleX(0);  transform: scaleX(0);}#transition-demo2:hover:before {  -webkit-transform: scaleX(1);  transform: scaleX(1);}

The button combined with transform mainly uses the :before element. To achieve this effect, it is reduced to invisible by default. When hovering, the element size is restored, and the change of scaling X and Y axes achieves two things. different buttons;

If there are deficiencies or errors in this article, please point it out. Let’s learn together;

Some reference materials:

MDNCSS transition

MDN uses CSS transitions

W3School_CSS transition

Easing function collection