Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use the transition of CSS3". In daily operation, I believe many people have doubts about how to use the transition of CSS3. I have consulted all kinds of materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "how to use the transition of CSS3"! Next, please follow the small series to learn together!

CSS3-transition

Transition represents a transition in CSS3 that allows elements to gradually change from one style to another.

2, transition: height 2s; indicates that the element height needs to be graded, and the gradient time is 2s. Transition has other parameters as shown below:

3, -moz-,-webkit-,-o-These three are manufacturer prefixes, different browsers manufacturers, because different browsers have different standards, so for compatibility, you need to add the manufacturer prefix corresponding to the commonly used browser. So the four attributes represent one meaning.

-moz-is Firefox vendor prefix

-webkit-is a Google browser vendor prefix

-o-is the opera browser vendor prefix

4、div {

width:100px;

height:30px;

background:blue;

transition:width 2s;

-moz-transition:height 2s; /* Firefox 4 */

-webkit-transition:height 2s; /* Safari and Chrome */

-o-transition:width 2s; /* Opera */

}

This sentence means:

1) Set a div element, width 100px, height 30px, background blue, set transition effect 2s.

2) When the browser is Firefox, Safari(Mac comes with a browser), Google (Chrome), trigger the height change to produce a gradient effect of 2s.

3) When the browser is other than the browser in the previous sentence, the trigger width change produces a gradient effect of 2s.

Usage: A condition is required to trigger the generation of the gradient effect. For example:

div:hover {

height:100px

}

This means that hovering over a div triggers a div height gradient that changes to 100px in 2 seconds, but when the mouse is moved away, the div height also returns to 30px in 2 seconds.

Additional information:

Transition attribute values can be set to multiple values. width 2s, height 2s, transform 2s;

Example: The effect is that when the mouse hovers over a div, the height becomes 200px, the width becomes 200px, and the div element rotates 180 degrees.

div {

width: 100px;

height: 100px;

background: yellow;

transition: width 2s, height 2s;

-moz-transition: width 2s, height 2s, -moz-transform 2s;/* Firefox 4 */

-webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari and Chrome */

-o-transition: width 2s, height 2s, -o-transform 2s;/* Opera */

}

div:hover {

width: 200px;

height: 200px;

transform: rotate(180deg);

-moz-transform: rotate(180deg);/* Firefox 4 */

-webkit-transform: rotate(180deg);/* Safari and Chrome */

-o-transform: rotate(180deg);/* Opera */

}

Place your mouse pointer over the yellow div element to see the transition effect.

Note: This example does not work in Internet Explorer.

The overall usage code is as follows:

The effects are as follows:

At this point, the study of "how to use CSS3 transition" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.