规定设置过渡效果的CSS属性的名称。规定完成过渡效果需要多少秒或毫秒。规定速度效果的速度曲线。定义过渡效果何时开始。
以上是转型的四个属性。
使用语法
转型:,property duration timing-function 延迟;
div
{
,,,转换属性:,宽度;
,,,transition-duration:, 1 s;
,,,transition-timing-function:,线性;
,,,transition-delay:, 2 s,/*, Firefox 4, */-moz-transition-property:宽度;
,,,-moz-transition-duration: 1;
,,,-moz-transition-timing-function:线性;
,,,-moz-transition-delay: 2 s,/*, Safari 和,Chrome */-webkit-transition-property:宽度;
,,,-webkit-transition-duration: 1;
,,,-webkit-transition-timing-function:线性;
,,,-webkit-transition-delay: 2 s,/*, Opera */-o-transition-property:宽度;
,,,-o-transition-duration: 1;
,,,-o-transition-timing-function:线性;
,,,-o-transition-delay: 2 s;
} 该例子可写成简写的过渡属性:
div
{
,,,的转变:,width 1 s linear 2 s;
,,,-moz-transition: width 1 s linear 2 s,,/*, Firefox 4 */,,,-webkit-transition: width 1 s linear 2 s,,/*, Safari 以及Chrome */,,,-o-transition: width 1 s linear 2 s,,/*, Opera */} [注意]过渡的这四个子属性之间不能用逗号隔开,只能用空格隔开。因为逗号隔开的代表不同的属性(过渡属性支持多值,多值部分稍后介绍);而空格隔开的代表不同属性的四个关于过渡的子属性。
