有人可以告诉我为什么20秒延迟不能在这里工作？

Question

有人可以告诉我为什么20秒延迟不能在这里工作吗？

它实际上显示动画20秒然后重新启动它！

谢谢。

CSS

#birds2 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 470px;
    height: 93px;
    opacity: 1.0;
    -webkit-animation: birds2_anim 120s linear normal;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal, horizontal ;
    -webkit-animation-timing-function: linear, ease-in;
    -webkit-animation-delay:20s;
}   
@-webkit-keyframes birds2_anim {
    0%   { -webkit-transform: translate(500px, 150px); }
    100% { -webkit-transform: translate(-700px, -100px); }
}

的Javascript

var container7 = document.getElementById("birdsContainer");
container7.appendChild(createCbird());
function createCbird() {
var image = document.createElement("img");
image.id = "birds2";    
image.src = "Images/Weather/birds/birds1.gif";
return image;

Answer 1

您的延迟/持续时间都运作良好，但您可能正在寻找这些属性：

-webkit-animation-fill-mode: forwards;
-webkit-animation-iteration-count: 1;

第一个将动画结束设置为最后一帧（默认为第一帧），而第二个设置仅使其运行一次。

修改

如您希望将其定位为动画的第一帧，请添加

#birds2 {
    left: 500px;
    top: 150px;    
}

@-webkit-keyframes birds2_anim {
    0%   { -webkit-transform: translate(0px, 0px); }      /* Set 0px and 0px */
    /* Or you can simply remove the property, leaving empty brackets for 0% */
    100% { -webkit-transform: translate(-700px, -100px); }
}

Edited Fiddle