css3动画系列之transition 属性
浏览器支持情况:
Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。
Safari 支持替代的 -webkit-transition 属性。
定义和用法
transition 属性是一个简写属性,用于设置四个过渡属性:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。
all 0 ease 0 |
no |
CSS3 |
object.style.transition="width 2s" |
语法
transition: property duration timing-function delay;
transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
transition-duration | 规定完成过渡效果需要多少秒或毫秒。 |
transition-timing-function | 规定速度效果的速度曲线。 |
transition-delay | 定义过渡效果何时开始。 |
例:
把鼠标指针放到 div 元素上,其高度会从 100px 逐渐变为 350px:
div { height:100px; transition: height 2s; -moz-transition: height 2s; /* Firefox 4 */ -webkit-transition: height 2s; /* Safari 和 Chrome */ -o-transition: height 2s; /* Opera */ } div:hover{ height:350px; }
相关推荐
周公周金桥 2020-09-06
大象从不倒下 2020-07-31
AlisaClass 2020-07-19
MaureenChen 2020-04-21
xingguanghai 2020-03-13
teresalxm 2020-02-18
木四小哥 2013-05-14
SoShellon 2013-06-01
Simagle 2013-05-31
羽化大刀Chrome 2013-05-31
waterv 2020-01-08
LutosX 2013-07-29
vanturman 2013-06-27
wutongyuq 2013-04-12
luoqu 2013-04-10
today0 2020-09-22
89520292 2020-09-18