48. CSS3 animation-duration属性设置动画播放时间
animation-duration
主要用来设置 CSS3 动画播放时间,其使用方法和transition-duration
类似,是用来指定元素播放动画所持续的时间长,也就是完成从 0%到 100%一次动画所需时间。单位:S 秒
语法规则:
animation-duration: <time>[,<time>]*
取值<time>为数值,单位为秒,其默认值为“0”,这意味着动画周期为“0”,也就是没有动画效果(如果值为负值会被视为“0”)。
案例演示:
制作一个矩形变成圆形的动画,整个动画播放时间持续了 10s 钟。
HTML 代码:
<div>Hover Me</div>
CSS 代码:
@keyframes toradius{ from { border-radius: 0; } to { border-radius: 100%; } } div { width: 200px; height: 200px; line-height: 200px; text-align: center; color: #fff; background: green; margin: 20px auto; } div:hover { animation-name: toradius; animation-duration: 10s; animation-timing-function: ease-in-out; animation-delay: .1s; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 48. CSS3 animation-duration属性设置动画播放时间
码云笔记 » 48. CSS3 animation-duration属性设置动画播放时间