Transition transition effect

Transition: Transition, transformation, and change.

Transition effect transition

Transition is a new style in css3. It has four attribute values: the speed change of the transition-duration (transition-timing-function) of the Transition attribute (transition-property) transition-delay );

The following example is provided:

<! -- This is an example program --> <Div id = "content"> </div>

CSS code

/* Add some styles to the DIV so that you can intuitively observe */Div {Background: green; width: 120px; Height: 120px ;} /* transition definition note that different browsers have different implementation methods for this attribute. ie currently does not support this attribute */# Content {-WebKit-transition: width 2 S;-moz-transition: width 2 S;-o-transition: width 2 S; transition: width 2 S;}/* now defines the changes when the mouse crosses the DIV */# Content: hover {width: 300px ;}

When the mouse is hovering over the DIV, its width does not change from Biu to 300px, but is over 2 seconds. When the mouse moves out of the DIV range, it also changes back to the original width after 2 seconds.

If you want to perform a transitional effect on multiple attributes, it is certainly not unfamiliar to those who have played CSS. it is OK to separate multiple attributes with commas, just like

# Content

{ transition: width 2s, height 2s, background 2s; }

Excessive delay loading-Delay

# Content {-WebKit-transition-property: width;/* set the excessive property to width */-moz-transition-property: width;-o-transition-property: width; transition-property: width;-WebKit-transition-Duration: 2 S;/* set the duration to 2 S */-moz-transition-Duration: 2 S; -O-transition-Duration: 2 S; transition-Duration: 2 S;-WebKit-transition-delay: 3 S; /* set the delay time to 3 S */-moz-transition-delay: 3 S;-o-transition-delay: 3 S; transition-delay: 3 S ;}

In this case, the effect is that when you hover the cursor over the DIV, you must pause for 3 seconds before changing the width.

Transition-timing-Function

Transition-timing-function has five attribute values:

Slow (default) Slow-in acceleration slow-out slow-in-out slow

/* Add speed changes to the above transition effect */# Content {-WebKit-transition-timing-function: progress;-moz-transition-timing-function: progress; -O-transition-timing-function: enabled ;}

This adds a rate change to the transition.

Transition transition effect