完成后如何保持CSS3动画静止，然后在鼠标消失后恢复

Question

我有一个关于 CSS3 动画/变换的问题。通常情况下，我总能找到解决 CSS3 的方法——因为它非常简单，但这个问题一直给我带来麻烦。

我有一张加号的图片。当用户将鼠标悬停在加号上时，它会旋转 360 度，并且图片会变为减号。一切都运行良好，除了动画结束时它会迅速恢复为加号；我希望它保持在减号上，直到鼠标悬停，然后它可以回到加号。

这是我的代码：

#lock-screen #time-section .unlock {
    cursor: pointer;
    display: block;
    height: 22px;
    width: 23px;
    background-image: url('../images/metro_icon_pack/plus.png');
    background-repeat: no-repeat;
    margin-left: -15px;
    margin-top: 5px;
}

#lock-screen #time-section .unlock:hover {
    animation: rotate 1s;
    -o-animation: rotate 1s;
    -ms-animation: rotate 1s;
    -moz-animation: rotate 1s;
    -webkit-animation: rotate 1s;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        background-image: url('../images/metro_icon_pack/minus.png');
    }
}

现在，我意识到我只是为基于 WebKit 的浏览器（Chrome 和 Safari）提供代码。那是因为我在 Chrome 中测试它，稍后我会在获得它后添加对其他浏览器的进一步支持。

感谢您的帮助，伙计们！

Answer 1

我会将 minus 背景图像放在#lock-screen #time-section .unlock:hover 下，然后添加一个单秒的背景图像过渡。

另外，除了使用 0%、100% 之外，您还可以使用 from、to...

喜欢：

#lock-screen #time-section .unlock:hover {
background-image: url('../images/metro_icon_pack/minus.png');
-webkit-transition: background-image 1s;
/* Other -vendor-transitions go here */
}

Demo.

我也会使用变换方法而不是动画，只使用过渡（您还可以将元素旋转回加号）...
Demo。

如果您不想将元​​素旋转回加号，只需将-webkit-transition 添加到悬停状态即可。

Demo.