【CSS3】设置动画开始播放的时间

来源：互联网发布：riot.js 编辑：程序博客网时间：2024/06/02 04:21

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:2s;  animation-iteration-count:infinite;}

结果展示：

0 0