html怎么设置动画时间,CSS3中设置动画开始播放的时间

animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。

语法规则：

animation-delay:[,]*

案例演示：

浏览器渲染样式之后2S之后触发move动画。

HTML:

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;

}

结果展示：