Transition Animation Property usage in CSS3

The transition of CSS3 is described in the "CSS" transition allows the CSS property values to smoothly transition within a certain time interval. This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element, and animating the CSS property values in a sleek and animated manner. ”

The value of the transition property includes the following four:

transition-property: Specifies which CSS property of an HTML element is gradient-processed, which can be a variety of standard CSS properties, such as color, width, height, and so on.
transition-duration: Specifies the duration of the attribute transition
transition-timing-function: Specify the speed of the gradient:
1. Ease: (gradually slows down) the default value, ease function is equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0);
2, Linear: (constant speed), the linear function is equivalent to the Bezier curve (0.0, 0.0, 1.0, 1.0);
3, Ease-in: (acceleration), the Ease-in function is equivalent to the Bezier curve (0.42, 0, 1.0, 1.0);
4, Ease-out: (deceleration), the Ease-out function is equivalent to the Bezier curve (0, 0, 0.58, 1.0);
5, Ease-in-out: (Acceleration and deceleration), the Ease-in-out function is equivalent to the Bezier curve (0.42, 0, 0.58, 1.0);
6, Cubic-bezier: (this value allows you to customize a time curve), a specific cubic-bezier curve. (x1, y1, x2, y2) four values are specific to point P1 and Point P2 on a curve. All values must be in the [0, 1] area, otherwise invalid.
Transition-delay: Specifies the delay time, which is how long it takes to begin the transition process.

Browser compatibility

Internet Explorer 9 and earlier versions do not support the transition property.

Internet Explorer, Firefox, Opera and chrome support the Transition property. Chrome 25 and earlier versions and Safari require a prefix of-webkit-.

The following is an example of how transition is used

<! DOCTYPE html>

The above code when you move the mouse over P, the CSS property: width,height,transform,background,opacity has a gradient transition effect. The final CSS style becomes the style defined in the. animated_p, and the transition process is roughly as follows:


To give an example of the E-chang of the Moon, asked: When the mouse moved to the picture, the Chang ' e appears, remove Shichang disappear

<! DOCTYPE html>

In order to make the Chang ' e floating into the effect of floating out, set the Transform property, with the Opacity attribute, add transition effect can achieve effect: