CSS3 transition

CSS3 Transition

In CSS3, we can transition from one style to another in order to add a certain effect without using Flash animation or JavaScript. .

---

How does it work?

#CSS3 Transition is the effect of an element gradually changing from one style to another.

To achieve this, two things must be specified:

• Specify the CSS property to add the effect

• Specify the effect duration.

Transition effect applied to the width attribute, with a duration of 2 seconds:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Note: If the period is not specified, the transition will have no effect because the default value is 0.

The effect will change when the value of the specified CSS property changes. A typical CSS property changes when the user mouses over an element:

Example

      
  
 
鼠标移动到 div 元素上，查看过渡效果。
  

Run the program to try it

---

Multiple changes

To add multiple styles of transformation effects, add attributes separated by commas:

      
  
鼠标移动到 div 元素上，查看过渡效果。
  

Run Try the program

---

Transition attributes

The following table lists all transition attributes:

Attribute	Description	CSS
transition	abbreviation attribute, use Used to set four transition properties in one property.	3
transition-property	Specifies the name of the CSS property that applies the transition.	3
transition-duration	Define how long the transition effect takes. The default is 0.	3
transition-timing-function	Specifies the time curve of the transition effect. The default is "ease".	3
transition-delay	Specifies when the transition effect starts. The default is 0.	3

---

##Example

Use all transition attributes:

      
  
过渡
 
鼠标移动到 div 元素上，查看过渡效果。
 
注意： 过渡效果需要等待两秒后才开始。
  

Run the program and try it

---

The same transition effect as the example above

, but using the abbreviated transition attribute:

      
  
 
鼠标移动到 div 元素上，查看过渡效果。
 
注意： 过渡效果需要等待两秒后才开始。
  

Run the program and try it