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

Posted 2023-03-06

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

【英文标题】：How to keep CSS3 Animation still after finishing, then reverting after mouse goes away

【发布时间】：2012-10-17 20:20:02

【问题描述】：

我有一个关于 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 中测试它，稍后我会在获得它后添加对其他浏览器的进一步支持。

感谢您的帮助，伙计们！

【问题讨论】：

您应该始终将不带前缀的属性放在最后。目前，Firefox 支持无前缀动画，但是 unprefixed 属性不会像您编写代码那样应用，因为 -moz- 前缀在它之后并被应用。另外，虽然我完全同意答案（在这种情况下应该使用过渡），但我也认为您可能想查看 animation-fill-mode 属性 developer.mozilla.org/en-US/docs/CSS/animation-fill-mode

【参考方案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.

【讨论】：

哇，谢谢！很好的输入，我会接受的答案。再次感谢！