CSS3 transition property

 The CSS3 transition property is a CSS3 transition effect. Web designers can use the effect of the CSS3 transition property to adjust the special effects of web page element changes, such as the effect of DIV block size change and the slow effect of web text change. Just use the CSS3 transition property. Set the value in seconds, you can easily create the feeling of slow motion (Slow Motion). However, the transition property of CSS3 is not supported in older browsers. Later, a browser will sort out the support status of CSS3 transition property for your reference. Let’s first look at the grammatical rules of this transition property and what the parameters represent. What does it mean.

Basic syntax of CSS3 transition property

transition: property duration timing-function delay;

In fact, CSS3 transition is an integrated grammar that includes the effects of four property values ​​such as property duration timing-function delay. This grammatical concept is similar to the CSS border design grammar. CSS3 transition property values ​​can also be independent. After designing, the representative meaning of these attribute values ​​is as follows:

grammar	Description
transition-property	Used to define the attribute name that can produce the transition attribute effect, such as width, background color...
transition-duration	Used to define the time when the transition property occurs, in seconds.
transition-timing-function	It is used to define the occurrence speed of the transition effect, which can be said to be the Bezier curve on which the transition is set.
transition-delay	Used to define how long the transition effect will take place.

➤Set these four attribute effects separately to design a very delicate animation effect. If it is a simple and simple animation, such as the gradual change of the background color or the simple deformation of the DIV block, you can directly use the transition to express each attribute value come out.

All browsers support the CSS3 transition property.

Since the transition property is a fairly new CSS3 feature, not all browser versions support it. Old browsers do not support all the latest versions. The effect of the transition attribute is supported. The following is a summary of the degree of support, please refer to it.

• Chrome 26.0 and above are supported, please start with -webkit- for the syntax
  
• FireFox 16.0 and above are supported. Please use -moz- for the syntax
• Safari 6.1 and above are supported. Please start with -webkit- for the syntax
• Opera 12.1 and above are supported. Please use -o- for the syntax
• IE 10.0 and above are supported

If the browser that your target user group will use is above these versions, it is very convenient to use transition to design special effects if there is no problem with support. Below we have prepared two good simple examples to change the DIV block The size and the change time of changing the text color are quite simple.

CSS3 transition property example 1. Change the size of the DIV block

<style type="text/css">
#
    Change1 { width:60px;
    height:60px;
    background:blue;
    transition:width 5s;
    -webkit-transition:width 5s;
    -moz-transition:width 5s;
    -o-transition :width 5s;
}
#
    Change2 { width:60px;
    height:60px;
    background:yellow;
    transition:width 3s;
    -moz-transition:width 3s;
    -webkit-transition:width 3s;
    -o-transition:width 3s;
}
#Change3{
    width:60px;
    height:60px;
    background:red;
    transition:width 1s;
    -moz-transition:width 1s;
    -webkit-transition:width 1s;
    -o-transition:width 1s;
}
#Change1:hover,#Change2:hover,#Change3:hover{
    width:500px;
}
</style>
<div id="Change1"></div>
<div id=" Change2"></div>
<div id="Change3"></div>

Presentation effect (please place the mouse on the block)

The example prepares a total of three DIV blocks with different colors. They all use CSS3 transition to modify the size. As you can see, in addition to the difference in color of the three DIV blocks, the size change speed of transition also has The difference, such as the syntax "transition:width 5s;" in the first block, means that the width of the block (width) can be changed, and the total change time is 5 seconds (5s), compared to the yellow block 3. Seconds and 1 second of the red block, the blue block obviously changes slowly, because the initial width of each DIV block is only 60px, but the blue block takes the longest time to extend to 500px, so the speed The slowest, the red block takes the shortest time, so the fastest.

The most important key point of Example 1 is the "transition: width seconds;" grammar, declaring that the transition property of the DIV block will affect only the width (width), which changes according to the set number of seconds. How to write the effect of CSS3 transition on webpage text? Example 2 will provide reference.

CSS3 transition property example two, text color transformation

<style type="text/css">
#TestString{
    font-size:25px;
    font-weight:bold;
    color:#003399;
}
#TestString:hover{
    color:#00DB00;
    transition:color 3s;
    -moz-transition :color 3s;
    -webkit-transition:color 3s;
    -o-transition:color 3s;    
}
</style>
<span id="TestString">Test the gradual color effect of text color</span>

Presentation effect (please place the mouse on the sample text)

Test the gradual color effect of text color

We first prepare a piece of text and wrap it with a span tag, and apply the CSS effect to the text through id. Here, first set the text to the color blue (color:#003399), and color (text color) is used here. , Font-size (text size) and font-weight (text weight) and other effects, and then set the special effect when the mouse is moved over the text, that is, in the hover property of CSS, first set the color to dark green (color:# 00DB00;), and then apply "transition:color 3s;" to modify the transition effect of the text color, the total execution time is 3 seconds, we can see from the effect of the example, when the mouse is moved to the text for 3 seconds In time, the text gradually changed from blue to dark green!

➤Some traditional web design needs JavaScript effects. If the browsers of netizens support CSS3 animation properties, they can be processed directly using CSS3 transition properties, saving the designer the time cost of writing additional JavaScript effects. .