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>請把鼠標(biāo)指針放到黃色的 div 元素上,來查看過渡效果。</p>

<p><b>注釋:</b>本例在 Internet Explorer 中無效。</p>

</body>
</html>

Run instance ?

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