transition-delay属性怎么用

transition-delay属性指定何时将开始进行切换效果,其值是指以秒(s)或毫秒(ms)为单位。

transition-delay属性怎么用

CSS3 transition-delay属性

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

语法:

transition-delay: time

登录后复制

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

注释:Internet Explorer 9 以及更早版本的浏览器不支持 transition-delay 属性;Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition-delay 属性。Safari 支持替代的 -webkit-transition-delay 属性。

CSS3 transition-delay属性的使用示例

nbsp;html> div{width:100px;height:100px;background:blue;transition-property:width;transition-duration:5s;transition-delay:2s;/* Firefox 4 */-moz-transition-property:width; -moz-transition-duration:5s;-moz-transition-delay:2s;/* Safari and Chrome */-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 元素上等待两秒钟,查看过渡效果。

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

说明:本例在 Internet Explorer 中无效。

登录后复制

效果图:

1.gif

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注【创想鸟】相关教程栏目!!!

以上就是transition-delay属性怎么用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2888849.html

(0)
上一篇 2025年3月10日 21:15:42
下一篇 2025年2月25日 01:43:58

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • transition-timing-function属性怎么用

    transition-timing-function属性是用来规定过渡效果的速度曲线,它允许过渡效果随着时间来改变其速度;可以实现慢速开始,然后变快,然后慢速结束等等的过渡效果。 CSS3  transition-timing-functi…

    2025年3月10日
    200
  • css3 transition-duration属性怎么用

    css3 transition-duration属性用于规定完成过渡效果需要花费的时间(以秒或毫秒计),语法为transition-duration: time。当time值为0是,意味着不会发生过渡效果。 CSS3  transition…

    2025年3月10日
    200
  • transition-property属性怎么用

    transition-property属性是用于指定应用过渡效果的 css 属性的名称;当指定的 css 属性发生改变时,过渡效果将开始。 CSS3  transition-property属性  作用:transition-propert…

    2025年3月10日
    200
  • backface-visibility属性怎么用

    backface-visibility属性是用于定义当元素不面向屏幕时是否可见;如果在旋转元素不希望看到其背面时,该属性很有用。 CSS3  backface-visibility属性 作用:backface-visibility 属性定义…

    2025年3月10日
    200
  • perspective属性怎么用

    perspective属性是用来定义 3d 元素距视图的距离,以像素计;它允许你改变 3d 元素查看 3d 元素的视图。 CSS3  perspective属性 作用:perspective 属性定义 3D 元素距视图的距离,以像素计。该属…

    2025年3月10日
    200
  • perspective-origin属性怎么用

    perspective-origin属性用于定义 3d 元素所基于的 x 轴和 y 轴,它允许改变3d元素的底部位置。当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身。 CSS3  pers…

    2025年3月10日
    200
  • transform属性怎么使用

    transform属性用于向元素应用 2d 或 3d 转换;该属性允许我们对元素进行旋转、缩放、移动或倾斜。 CSS3  transform属性 作用:transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、…

    2025年3月10日
    200
  • transform-style属性怎么用

    transform-style属性用来指定嵌套元素是怎样在三维空间中呈现。当值为flat时,表示所有子元素在2d平面呈现;值为preserve-3d时,表示所有子元素在3d空间中呈现。 CSS3 transform-style属性 作用:t…

    2025年3月10日
    200
  • transform-origin属性怎么用

    transform-origin属性用于改变被转换元素的位置。在2d 转换元素中可以改变元素 x 和 y 轴的位置;3d 转换元素中还可以改变其 z 轴的位置。 CSS3  transform-origin属性 作用:transform-o…

    2025年3月10日
    200
  • word-break属性怎么用

    word-break属性用于指定非cjk(中日韩)脚本的断行规则,规定了自动换行的处理方法。通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。 CSS3  word-break属性 作用:word-break 属性规定…

    2025年3月10日
    200

发表回复

登录后才能评论