如何在完成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

我会将减去的背景图像放在#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。