html - 执行完成时悬停背景动画返回起点

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