<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
style
>
div
{
width:100px;
height:100px;
background:red;
margin: 10px 0px;
}
.demo1{
transition:width 2s;
transition-timing-function:linear;
/* Firefox 4 */
-moz-transition:width 2s;
-moz-transition-timing-function:linear;
/* Safari and Chrome */
-webkit-transition:width 2s;
-webkit-transition-timing-function:linear;
/* Opera */
-o-transition:width 2s;
-o-transition-timing-function:linear;
}
.demo2{
transition:width 2s;
transition-timing-function:ease;
/* Firefox 4 */
-moz-transition:width 2s;
-moz-transition-timing-function:ease;
/* Safari and Chrome */
-webkit-transition:width 2s;
-webkit-transition-timing-function:ease;
/* Opera */
-o-transition:width 2s;
-o-transition-timing-function:ease;
}
.demo1:hover,.demo2:hover
{
width:300px;
}
</
style
>
</
head
>
<
body
>
<
p
>请把鼠标指针移动到红色的 div 元素上,查看过渡效果。</
p
>
<
p
>匀速过渡</
p
>
<
div
class
=
"demo1"
></
div
>
<
p
>慢速开始,然后变快,然后慢速结束</
p
>
<
div
class
=
"demo2"
></
div
>
<
p
><
b
>注:</
b
>本例在 Internet Explorer 中无效。</
p
>
</
body
>
</
html
>