50. CSS3 animation-delay属性设置动画开始播放的时间
animation-delay
属性用来定义动画开始播放的时间,用来触发动画播放的时间点。和transition-delay
属性一样,用于定义在浏览器开始执行动画之前等待的时间。
语法规则:
animation-delay:<time>[,<time>]*
案例演示:
浏览器渲染样式之后 2S 之后触发 move 动画。
HTML 代码:
<div><span></span></div>
CSS 代码:
@keyframes move { 0%{ transform: translate(0); } 15%{ transform: translate(100px,180px); } 30%{ transform: translate(150px,0); } 45%{ transform: translate(250px,180px); } 60%{ transform:translate(300px,0); } 75%{ transform: translate(450px,180px); } 100%{ transfrom: translate(480px,0); } } div { width: 500px; height: 200px; border: 1px solid red; margin: 20px auto; } div span { display: inline-block; width: 20px; height: 20px; background: green; border-radius: 100%; animation-name:move; animation-duration: 10s; animation-timing-function:ease; animation-delay:3s; animation-iteration-count:infinite; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 50. CSS3 animation-delay属性设置动画开始播放的时间
码云笔记 » 50. CSS3 animation-delay属性设置动画开始播放的时间