45. CSS3 transition-delay属性设置动画过渡延迟时间
transition-delay
属性和transition-duration
属性极其类似,不同的是transition-duration
是用来设置过渡动画的持续时间,而transition-delay
主要用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行。
有时我们想改变两个或者多个 css 属性的transition
效果时,只要把几个transition
的声明串在一起,用逗号(“,”)隔开,然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点:第一个时间的值为 transition-duration
,第二个为transition-delay
。
例如:a{ transition: background 0.8s ease-in 0.3,color 0.6s ease-out 0.3;}
示例演示:
通过transition
属性将一个 200px *200px 的橙色容器,在鼠标悬浮状态时,过渡到一个 300px * 300px 的红色容器。而且整个过渡 0.1s 后触发,并且整个过渡持续 0.28s。
HTML 代码:
<div class="wrapper"> <div>鼠标放到我的身上来</div> </div>
CSS 代码:
.wrapper { width: 400px; height: 400px; margin: 20px auto; border: 2px dotted red; } .wrapper div { width: 200px; height: 200px; background-color: orange; -webkit-transition: all .28s ease-in .1s; transition: all .28s ease-in .1s; } .wrapper div:hover { width: 300px; height: 300px; background-color: red; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 45. CSS3 transition-delay属性设置动画过渡延迟时间
码云笔记 » 45. CSS3 transition-delay属性设置动画过渡延迟时间