如何在鼠标移开时反转 CSS 关键帧动画？

使用关键帧悬停后鼠标移出时反转动画

您正在寻找一种解决方案，以在鼠标悬停后反转鼠标移出时的旋转动画元素。虽然可以使用传统的 CSS 转换，但在使用 @keyframes 动画实现它时遇到了问题。

最佳解决方案包括在关键帧内同时使用“to”和“from”值。更正后的代码为：

@keyframes in {
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@keyframes out {
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

但是，考虑浏览器兼容性很重要。虽然 CSS3 得到广泛支持，但建议使用供应商前缀以获得最大兼容性：

@-webkit-keyframes in { /* Safari, Chrome */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@-webkit-keyframes out { /* Safari, Chrome */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

@-moz-keyframes in { /* Firefox */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@-moz-keyframes out { /* Firefox */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

@keyframes in { /* Default fallback */
    from: transform: rotate(0deg);
    to: transform: rotate(360deg);
}

@keyframes out { /* Default fallback */
    from: transform: rotate(360deg);
    to: transform: rotate(0deg);
}

以上是如何在鼠标移开时反转 CSS 关键帧动画？的详细内容。更多信息请关注PHP中文网其他相关文章！