如何在鼠标悬停时创建反向 CSS 动画？

悬停后鼠标移出时的反向动画

您在尝试使用 CSS 动画创建鼠标移出时的反向动画时遇到问题。让我们深入研究问题并提供最佳解决方案。

在您的初始代码中，您使用了带有“旋转”属性的简单 CSS 变换动画，并且“入”和“出”关键帧具有“to”值来定义旋转。然而，当使用 @keyframes 动画时，您需要在关键帧内指定“from”和“to”值来创建过渡效果。

结合您对迭代和动画的需求的最佳解决方案是修改 @keyframes 规则如下：

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

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

使用此代码，“in”关键帧从零旋转开始并转到 360 度旋转，而“向外”关键帧从 360 度旋转开始，然后返回到零旋转，在鼠标移出时创建所需的反向效果。

浏览器兼容性注意事项：

请记住CSS3 尚未完全普遍实施。为了确保跨浏览器兼容性，您可能需要针对不同的浏览器使用不同的@keyframes语法：

• Chrome、Safari (v5)：@-webkit-keyframes
• Firefox (v16) ): @keyframes (v5-15: @-moz-keyframes)
• 歌剧(v15-22): @-webkit-keyframes (v12: @-o-keyframes)
• Internet Explorer (v10 ): @keyframes

要进一步增强代码，您可以还可以在 CSS 规则中指定动画持续时间和迭代次数。

这里是实现这些的代码片段改进：

.class {
    animation-name: out;
    animation-duration: 2s;
}

.class:hover {
    animation-name: in;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

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

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

以上是如何在鼠标悬停时创建反向 CSS 动画？的详细内容。更多信息请关注PHP中文网其他相关文章！