如何在第一個循環結束時暫停CSS關鍵幀動畫？

我正在處理我的第一個CSS關鍵幀動畫，並想知道在動畫完成第一次運行後如何暫停動畫。你可以在這裏查看我的網站：http://www.tommaxwell.me，底部的灰色引用中有一個懸停動畫，你可以看到。但是，一旦動畫結束，重置。我應該如何停止它，以便它在動畫完成時保持在動畫的最終狀態？如何在第一個循環結束時暫停CSS關鍵幀動畫？

我知道在這種情況下使用關鍵幀動畫是一種跛腳和不必要的，但我真的只是測試關鍵幀，並稍後使用它。 :)

來源

2012-11-25 Tom Maxwell

@ Mr.Alien：動畫不是過渡。即使你的答案建議使用轉換，它們也不是一回事。 – BoltClock

@BoltClock ya我意識到這一點，這就是爲什麼我建議他使用轉換爲他在這裏試圖實現什麼樣的具體效果使用這裏不需要的動畫，他想保留懸停狀態我猜 –

@ Mr.Alien ：你正在根據答案進行標記，這不是正確的做法。只根據問題進行標記。 – BoltClock

我知道你在這裏做什麼，使用CSS transition代替

Demo

.class { 
    color: #ff0000; 
    transition: color 2s; 
    -moz-transition: color 2s; /* Firefox 4 */ 
    -webkit-transition: color 2s; /* Safari and Chrome */ 
    -o-transition: color 2s; /* Opera */ 
} 

.class:hover { 
    color: #00ff00; 
}

您將無法保存您的文本的懸停狀態下，你需要使用JavaScript

來源

2012-11-25 08:15:30

太好了，謝謝！我想我現在明白兩者的區別。 –

@TomMaxwell歡迎:) –

As @Mr。外星人回答說，轉換更喜歡這個，但既然你問過 - 可以保持動畫中的最後一個狀態。

您可以通過添加animation-fill-mode: forwards;

這裏做到這一點是一個demo

下面是我的示例代碼：

HTML

<div class="text">Hover here</div>

CSS

.text { 
    color: blue; 
} 

.text:hover { 
    -webkit-animation: color 1.0s ease-in forwards; 
     -moz-animation: color 1.0s ease-in forwards; 
     -o-animation: color 1.0s ease-in forwards; 
      animation: color 1.0s ease-in forwards;  
} 

@-webkit-keyframes color { 
    0% { color: blue; } 
    100% { color: red; } 
} 

@-moz-keyframes color { 
    0% { color: blue; } 
    100% { color: red; } 
} 

@-o-keyframes color { 
    0% { color: blue; } 
    100% { color: red; } 
} 

@keyframes color { 
    0% { color: blue; } 
    100% { color: red; } 
}

如果你想了解'animation-fill-mode'屬性，這裏有一個很好的資源。 http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property

來源

2012-11-25 09:19:00

我不知道爲什麼接受的答案得到了所有的讚揚，因爲Chistofer是真正回答問題的人。 –

如何在第一個循環結束時暫停CSS關鍵幀動畫？

回答

相關問題