Usually when the CSS property value changes, the browser will immediately update the corresponding style. For example, when the mouse hovers over the element, the style defined through the :hover selector will be immediately applied to the element. A transition function has been added to CSS3, through which you can smoothly transition elements from one style to another within a specified time, similar to a simple animation, but without resorting to flash or JavaScript.
CSS provides 5 properties related to transition, as follows:
To successfully implement a transition effect, two things must be defined:
(1) Properties of parameters and transition effects in elements;
(2) The duration of the transition effect.
Tip: The transition effect usually occurs when the mouse is hovering over the element. If the transition duration is not set, the transition effect will not take effect because the default value of the transition time is 0.
1. transition-property
The transition-property attribute is used to set the name of the attribute in the element that participates in the transition. The syntax format is as follows:
transition-property:none|all|property;
Parameter description is as follows:
none: Indicates that no attributes participate in the transition effect;
all: Indicates that all attributes participate in the transition effect;
property: defines a list of CSS property names that apply transition effects. Use commas to separate multiple property names.
The sample code is as follows:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-p roperty:width,background;}div:hover{width:200px;background-color:blue;}</style></head><body><div></div></body></html>Running results:
2. transition-duration
The transition-duration attribute is used to set the time it takes for the transition (in seconds or milliseconds). The syntax is as follows:
transition-duration:time;
Among them, time is the time it takes to complete the transition effect (in seconds or milliseconds). The default value is 0, which means there will be no effect.
If there are multiple attributes participating in the transition, you can also set the transition time for these attributes in turn. Use commas to separate multiple attributes, such as transition-duration: 1s, 2s, 3s;. In addition, you can also use a time to set the time required for the transition for all properties participating in the transition. The sample code is as follows:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width, background;transition-duration:.25s,1s;}div:hover{width:200px;background-color:blue;}</style></head><body><div></div></body>< /html>3. transition-timing-function
The transition-timing-function attribute is used to set the type of transition animation. The optional values of the attribute are as follows:
4. transition-delay
The transition-delay attribute is used to set when the transition effect starts. The syntax format of the attribute is as follows:
transition-delay:time;
Among them, the parameter time is used to set the time to wait before the transition effect starts, in seconds or milliseconds.
5. transition
The transition attribute is the abbreviation of the above four attributes. Through this attribute, the above four attributes can be set at the same time. The syntax format of the attributes is as follows:
transition:transition-propertytransition-durationtransition-timing-functiontransition-delay;
In the transition attribute, transition-property and transition-duration are required parameters, and transition-timing-function and transition-delay are optional parameters. They can be omitted if not necessary. In addition, multiple groups of transition effects can also be set through the transition attribute. Each group is separated by commas. The sample code is as follows: