transition-delay属性怎么用

　　CSS3transition-delay属性

　　作用：transition-delay属性规定过渡效果何时开始。transition-delay值以秒或毫秒计。

　　语法：

　　transition-delay:time

　　说明：time是规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

　　注释：InternetExplorer9以及更早版本的浏览器不支持transition-delay属性；InternetExplorer10、Firefox、Opera和Chrome支持transition-delay属性。Safari支持替代的-webkit-transition-delay属性。

　　CSS3transition-delay属性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="UTF-8">

　　<style>

　　div

　　{

　　width:100px;

　　height:100px;

　　background:blue;

　　transition-property:width;

　　transition-duration:5s;

　　transition-delay:2s;

　　/*Firefox4*/

　　-moz-transition-property:width;

　　-moz-transition-duration:5s;

　　-moz-transition-delay:2s;

　　/*SafariandChrome*/

　　-webkit-transition-property:width;

　　-webkit-transition-duration:5s;

　　-webkit-transition-delay:2s;

　　/*Opera*/

　　-o-transition-property:width;

　　-o-transition-duration:5s;

　　-o-transition-delay:2s;

　　}

　　div:hover

　　{

　　width:300px;

　　}

　　</style>

　　</head>

　　<body>

　　<p>请把鼠标指针移动到蓝色的div元素上等待两秒钟，查看过渡效果。</p>

　　<p><b>说明：</b>过渡效果会在开始前等待两秒钟。</p>

　　<p><b>说明：</b>本例在InternetExplorer中无效。</p>

　　</body>

　　</html>

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/rumen/r54197.shtml