css3 transition属性


  翻译结果:

transition

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

n.过渡,转变,变迁;[语]转换;[乐]变调

第三人称单数: transitions 复数: transitions 现在分词: transitioning 过去式: transitioned

css3 transition属性语法

作用:设置元素的过渡属性

说明:复合属性。检索或设置对象变换时的过渡。

CSS3中的transform属性可以实现过渡效果。它设置了过渡效果的名称,完成的时间、速度曲线及开始时间



css3 transition属性示例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

热门推荐

首页

视频

问答