首页前端开发CSStransition-delay属性怎么用

transition-delay属性怎么用

时间2024-05-21 20:14:03发布访客分类CSS浏览65
导读: CSS3transition-delay属性 作用:transition-delay属性规定过渡效果何时开始。transition-delay值以秒或毫秒计。 语法: transition-delay:time ...
  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属性的使用示例                        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;   }            

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

  
  

说明:过渡效果会在开始前等待两秒钟。

  

说明:本例在InternetExplorer中无效。

     


本文转载自中文网

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: transition-delay属性怎么用
本文地址: https://pptw.com/jishu/665100.html
transition-timing-function属性怎么用 transition-duration属性怎么用

游客 回复需填写必要信息