CSS3 transition属性是一个简写属性,用于设置四个过渡属性:transition-property;transition-duration,transition-timing-function,transition-delay;这里主要给大家讲一下transition 属性的语法和应用实例。
CSS3 transition属性是一个简写属性,用于设置四个过渡属性:transition-property;transition-duration,transition-timing-function,transition-delay;这里主要给大家讲一下transition 属性的语法和应用实例。
语法:
transition: property duration timing-function delay;
值
|
描述
|
transition-property
|
规定设置过渡效果的 CSS 属性的名称。
|
transition-duration
|
规定完成过渡效果需要多少秒或毫秒。
|
transition-timing-function
|
规定速度效果的速度曲线。
|
transition-delay
|
定义过渡效果何时开始。
|
用法注释:
transition 属性用于设置四个过渡属性:
transition-property
transition-duration
transition-timing-function
transition-delay
请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
默认值:
|
all 0 ease 0
|
继承性:
|
no
|
版本:
|
CSS3
|
JavaScript 语法:
|
object.style.transition="width 2s"
|
应用实例:
把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px:
div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
河南亿恩科技股份有限公司(www.enkj.com)始创于2000年,专注服务器托管租用,是国家工信部认定的综合电信服务运营商。亿恩为近五十万的用户提供服务器托管、服务器租用、机柜租用、云服务器、网站建设、网站托管等网络基础服务,另有网总管、名片侠网络推广服务,使得客户不断的获得更大的收益。
服务器/云主机 24小时售后服务电话:
0371-60135900
虚拟主机/智能建站 24小时售后服务电话:
0371-55621053
网络版权侵权举报电话:
0371-60135995
服务热线:
0371-60135900