transition

英[trænˈzɪʃn] 美[trænˈzɪʃən, -ˈsɪʃ-]

n.Transition, transformation, change; [language] conversion; [乐] Tone change

Third person singular: transitions Plural: transitions Present participle: transitioning Past tense: transitioned

css3 transition property syntax

Function: Set the transition attribute of the element

Description: Composite attribute. Retrieves or sets the transition when the object is transformed.

The transform attribute in CSS3 can achieve transition effects. It sets the name of the transition effect, completion time, speed curve and start time



css3 transition property example

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}

div:hover
{
width:300px;
}
</style>
</head>
<body>

<div></div>

<p>请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。</p>

<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance