如何讓元素在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