定义和用法

transition 用于设置动画过渡效果。

语法

transition:width .3s;
语言语法
Javascriptobject.style.transition=".3s";
Jquery$('选择器').css('transition',".3s");

例子 1

把鼠标指针放到 div 元素上,其宽度变化将是动画过度效果。

<html>
<head>
<style type="text/css"> 
div{
width:100px;
height:100px;
background:#93C283;
transition:width .3s;
-moz-transition:width .3s; /* 火狐样式 */
-webkit-transition:width .3s; /* webkit核心样式 */
-o-transition:width .3s; /* Opera */
}

div:hover{ width:300px;}
</style>
</head><body>
<div></div><p><b>注释:</b>在 IE9 以下无效。</p>
</body>
</html>

运行效果