如何让元素在CSS动画结束后立即回到初始位置？

Question

我动画SVG元素，使用此代码：

#bubble_1_{ 
    -webkit-animation: bubble1 10s forwards linear infinite; 
} 

@-webkit-keyframes bubble1{ 
    0%{ 
     -webkit-transform: translate(0px,0px); 
    } 

    5%{ 
     -webkit-transform: translate(1px,10px); 
    } 

    10%{ 
     -webkit-transform: translate(-1px,20px); 
    } 

    15%{ 
     -webkit-transform: translate(1px,30px); 
    } 

    20%{ 
     -webkit-transform: translate(-1px, 40px); 
    } 

    25%{ 
     -webkit-transform: translate(10px,45px); 
    } 

    30%{ 
     -webkit-transform: translate(20px,50px); 
    } 

    35%{ 
     -webkit-transform: translate(30px,49px); 
    } 

    40%{ 
     -webkit-transform: translate(40px, 51px); 
    } 

    45%{ 
     -webkit-transform: translate(50px,48px); 
    } 

    50%{ 
     -webkit-transform: translate(60px,51px); 
    } 

    55%{ 
     -webkit-transform: translate(70px,49px); 
    } 

    60%{ 
     -webkit-transform: translate(80px, 51px); 
    } 

    65%{ 
     -webkit-transform: translate(90px,48px); 
    } 

    70%{ 
     -webkit-transform: translate(100px,51px); 
    } 

    75%{ 
     -webkit-transform: translate(110px,49px); 
    } 

    80%{ 
     -webkit-transform: translate(120px, 51px); 
    } 

    85%{ 
     -webkit-transform: translate(130px,71px); 
    } 

    90%{ 
     -webkit-transform: translate(131px,100px); 
    } 

    95%{ 
     -webkit-transform: translate(129px,120px); 
    } 

    100%{ 
     -webkit-transform: translate(131, 140px); 
    } 
} 

但是，当涉及到结束，我可以看到它回到它的初始位置。这很奇怪，因为100％和0％之间的转换应该立刻发生，对吧？我需要这种行为，我不希望它被看到回归。

有谁知道我该怎么办？我尝试了'前锋'和'后退'，但这不起作用。

Answer 1

看起来你只是缺少PX您131, 140px设置为100％关键帧，然后在完成后立即跳回到起始位置（whi我认为是你想要的）。

如果你需要它在一个游戏后停止，那么你需要添加-webkit-animation-iteration-count: 1;并删除动画的infinte。

Answer 2

Internet Explorer 9和更早版本不支持animation-fill-mode属性。

你必须使用-webkit-animation-fill-mode: forwards;做这样这样这样的效果：

div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    position: relative; 
    -webkit-animation: mymove 3s; /* Chrome, Safari, Opera */ 
    -webkit-animation-iteration-count: 2; /* Chrome, Safari, Opera */ 
    -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ 
    animation: mymove 3s; 
    animation-iteration-count: 2; 
    animation-fill-mode: forwards; 
} 

这是一个例子LINK

-webkit-animation-iteration-count: 1; // you will need this to set the iteration at 1