执行完成后，悬停时的背景动画返回到起点

Question

我有一个透明背景的图像。我想在鼠标悬停时制作一个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

如何在动画后使背景永久化？

Answer 1

只需添加填充模式即可：

animation-fill-mode: forwards;

JSFiddle