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>
效果图:
以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目!!!
以上是transition属性怎么用的详细内容。更多信息请关注PHP中文网其他相关文章!