Summary of the new feature of CSS3 (Transition)

Summary of the new feature of CSS3 (Transition)
Transition is a short attribute with four values (each with a transition-Prefix) in the order that the property duration timing-function delay Transition completes the change of a certain attribute value within a certain period of time. Therefore, transition-duration must be set because its default value is 0; Transition-Property: the attribute value to be transitioned. Only the specified attribute will generate an animation when it is excessive. You can enter all, all indicates all animation properties;

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

 

The animation effect is generated only when the width is changed. You can select multiple attribute values;

# Demo {width: 20px; height: 20px; background-color: # 0080FF; transition-property: width, height; /* write multiple values separated by commas */transition-duration: 2 s;/* The transition duration can be either specified or specified separately, and separated by commas */}

 

Multiple Attributes are specified when the abbreviation is used:

# Demo {width: 20px; height: 20px; background-color: # 0080FF; transition: width 2 s, height 4S;/* separate the two definitions with commas, the last two values are optional. */}

 

When using sub-attributes, pay attention to the following points:

# Demo {transition-property: width, height, top; transition-duration: 2 s, 3 s;/* The number of time definitions is less than the number of properties, the array will be repeated */}/* is equivalent to */# demo {transition-property: width, height, top; transition-duration: 2 s, 3 s, 2 s ;}

 

# Demo {transition-property: width, height; transition-duration: 2 s, 3 s, 2 s;/* defines more time than the number of attributes, the extra value is truncated */}/*, which is equivalent to */# demo {transition-property: width, height; transition-duration: 2 s, 3 s ;}

 

Transition-duration: sets the duration of the Transition, which can be seconds or milliseconds. In my opinion, the Transition refers to the curve in which the value of the attribute changes is calculated by combining the set duration with the easing function; for example, the transition from Px to PX in four seconds is simply divided into four frames (assuming) 125px-150px-175px-200px. The principle should be similar to the from to of animation; transition lasted 2 s transition lasted 4 s transition Continued 8sTransition-timing-function: Set the transition animation curve, here is the W3School example, used inside is a few commonly used, browser embedded several animation curves, it can also be customized using cubic-bezr (n, n), where n is the value between 0 and 1. It is a complete set of easing functions, which is not set by default, it is slow, starts slowly, and then ends slowly. Transition-delay: sets the waiting time before the animation starts (0 by default, no delay). After hovering the mouse for 2 seconds, stretch the summary: using Transition makes the page look more dynamic. Below is a simple example of a button; 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 buttons combined with transform mainly use the before element. By default, this effect is reduced to invisible. During hover, the element size is restored, and X is scaled, the change in the Y axis implements two different buttons;