transition属性怎么用

2020-07-23 10:43:17
transition属性CSS3中的是一个简写属性,用于实现过渡效果。它设置了需要设置过渡效果的CSS属性名称,完成的时间、速度曲线及开始时间。

CSS3 transition属性

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

说明:复合属性。检索或设置对象变换时的过渡。用于设置四个过渡属性:transition-property,transition-duration,transition-timing-function,transition-delay。

语法:

transition: property duration timing-function delay;

transition-property:规定设置过渡效果的 CSS 属性的名称。

transition-duration:规定完成过渡效果需要多少秒或毫秒。

transition-timing-function:规定速度效果的速度曲线。

transition-delay:定义过渡效果何时开始。

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>

效果图:

1.gif