css - 有人可以告诉我为什么 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); }
}

编辑小提琴