如何停止關鍵幀動畫

您能否讓我知道如何停止關鍵幀動畫？在下面的例子中，div元素循環回到頂部並再次向下移動。鋤頭可以在分紅to{}條件後停止功能嗎？如何停止關鍵幀動畫

<style> 
div 
{ 
    width:100px; 
    height:100px; 
    background:red; 
    position:relative; 
    animation:mymove 5s infinite; 
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ 
} 

@keyframes mymove 
{ 
    from {top:0px;} 
    to {top:200px;} 
} 

@-webkit-keyframes mymove /* Safari and Chrome */ 
{ 
    from {top:0px;} 
    to {top:200px;} 
} 
</style> 

<div></div>

來源

2014-02-24 Behseini

你可以使用animation-fill-mode財產與forwards的價值。

從MDN：

forwards
目標將保留在執行過程中遇到的最後一個關鍵幀設置的計算值。遇到的最後一個關鍵幀取決於值animation-direction和 animation-iteration-count。

在這裏你去：

div { 
    -webkit-animation: mymove 5s forwards; /* Safari and Chrome */ 
    /* Add other vendor-prefixes if needed */ 
    animation: mymove 5s forwards; 
}

WORKING DEMO。

來源

2014-02-24 22:30:12

嗨哈希姆，感謝您的答覆，但這不適合我！你可以看看這個例子：http：//jsfiddle.net/Behseini/VXCXL/4/，看看它不起作用 – Behseini

正如你可以從例子中看到的那樣，框的透明度回到.5的結尾css再次規則。 – Behseini

@Behseini對不起，在我添加更多細節的時候，電力開了。在使用簡寫語法時，您應該在'animation'屬性中使用'forwards'關鍵字。 –

你的動畫數量中的「無限」是問題所在。它實際上意味着「無限」。刪除它，並添加填充模式：轉發，你就完成了。

來源

2014-02-24 22:36:00

嗨邁克爾，謝謝你的回覆，你可以看看這個例子http://jsfiddle.net/Behseini/VXCXL/4/看到它不適合我嗎？ – Behseini

這把小提琴在firefox，chrome和safari中爲我工作。（儘管你還應該有一個-webkit-animation-fill-mode：轉發以確保完整性）。您是否使用IE 9或更低版本？如果是這樣，那裏不支持動畫。 –

簡單。

你需要使用JavaScript。用css直接！不可能。

我把一個例子上的jsfiddle

http://jsfiddle.net/s4rmw/

代碼：

<div class="animation"><h2>¡HOVER ME!</h2></div>

這個div有一個動畫。當懸停！動畫停止

是我的意思是你的問題！

問候！

來源

2014-02-25 00:15:36 JoseAPL

如何停止關鍵幀動畫

回答

相關問題