July 24 = 266-270

12.2 transition animation provided by css3

Css3 supports transition animation, which can control a certain HTML component

When the attribute changes, it will take a period of time and change in a smooth gradient, which produces an animation effect.

The transition animation is specified by the transition attribute. The value of the transiton attribute includes the following four parts.

Transition-property: Specifies the CSS attribute of the HTML element for smooth gradient processing. The

Attributes can specify various attributes such as background-color, width, and height.

Standard CSS attributes.

Transition-Duration: specifies the duration of the attribute smoothing gradient.

Transition-timing-function: Specifies the gradient speed. This part supports the following values.

Slow: the animation starts slowly and then speeds up. This part supports the following values.

Linear: linear speed. The speed from the animation start to the end remains unchanged.

Animated-in: the animation starts slowly and then accelerates speed.

Seek-out: the animation starts quickly and then slows down.

Slow-in-out: When the animation starts, the speed is slow, and then the speed is increased. After the animation reaches the maximum speed, the speed is slowed down.

Cubic-bezr (x1, Y1, X2, Y2): controls the animation speed through the bezié curve. This attribute value is complete

It can replace linear, linear, memory-in, memory-out,

.

Transition-delay: Specifies the delay time, that is, the time after which the smooth gradient starts to be executed.

　　　　　　

Code example:

// Set the gradient when the background color of the element changes

Div {

Width: 100px;

Height: 100px;

Border: 1px solid;

Transition: Background-color 4S linear;

}

// Set the background color of the element when you move the cursor over it.

Div: hover {

Background-color: yellow;

}

 

To set multiple gradient effects, separate them with commas.

Code example:

// Set the gradient effect when the left and top attributes of the element change.

# Div1 {

Width: 100px;

Height: 100px;

Border: 1px solid;

Transition: Left 5S linear, top 5S linear;

}

JavaScript code:

// Bind a listener for the mouse-down event

// Obtain the elements that execute the gradient effect

VaR itemdiv = Document. getelementbyid ("div1 ");

// Record the left attribute of the div1 element.

Itemdiv. style. Left = "0px ";

// Record the top attribute of the div1 element.

Itemdiv. style. Top = "0px ";

Document. onmousedown = function (EVT ){

// Assign the X coordinate of the current mouse to the left attribute of the div1 element to change its attribute value and position.

Target. style. Left = EVT. pagex + "PX ";

// Assign the Y coordinate when the current mouse is pressed to the top attribute of the div1 element and change the attribute value and position.

Target. style. Top = EVT. pagex + "PX ";

}