懸停時的背景動畫在執行完成時返回到開始點

-1

我有一張透明背景的圖像。我想在鼠標懸停它時做一個css3背景動畫。懸停時的背景動畫在執行完成時返回到開始點

這是我使用的CSS：

@keyframes in 
{ 
from {background-color: #fff;} 
to {background-color: #900;} 
} 

@-webkit-keyframes in /*chrome-safari*/ 
{ 
from {background-color: #fff;} 
to {background-color: #900;} 
} 

img { 
    width: 150px; 
    height: 150px; 
    border: 1px solid black; 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
} 

img:hover {  
    animation: in 0.5s; 
    -webkit-animation: in 0.5s; 
    cursor: pointer; 
}

的動畫工作，問題是，當動畫到達終點（background-color: #900），它返回到起點（background-color: #fff）。

JSFiddle

如何使動畫後的背景永久的嗎？

來源

2013-08-25 BackSlash

如果你談論的是隻爲懸停狀態，然後添加「動畫填充模式：向前;」但如果你在懸停狀態之後談論 - 比下面的答案。 – drip

@drip是的，我說的是使動畫終點永久，而鼠標在圖像 – BackSlash

然後就像我說的填充模式將做的伎倆：http://jsfiddle.net/C5A5Q/4/ – drip

只需添加填充模式做的伎倆：

animation-fill-mode: forwards;

JSFiddle

來源

2013-08-25 21:30:39 drip

懸停時的背景動畫在執行完成時返回到開始點

回答

相關問題