如何使用 @keyframes 反转鼠标移出时的 CSS 动画？

如何实现鼠标悬停后的反向动画

在网页设计中，动画在增强用户体验方面发挥着至关重要的作用。一种常见的情况是悬停元素来触发动画，通常是旋转。然而，在鼠标移开时反转动画可能具有挑战性，尤其是在使用 CSS3 的 @keyframes 时。

考虑到提供的 CSS 示例，其中元素悬停时旋转 360 度，目标是让它旋转回 0 度鼠标移出时的度数。使用@keyframes动画，似乎达不到想要的效果。

解决办法在于了解animation-direction属性。 “To”表示动画的结束状态，而“from”则指定开始状态。通过在 @keyframes 定义中加入“from”关键字，我们可以创建反向动画：

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

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

此外，可以通过使用供应商前缀来确保跨浏览器兼容性：

@-webkit-keyframes in {
    ...
}

@-webkit-keyframes out {
    ...
}

为了进一步增强动画，指定animation-direction属性至关重要：

.class {
    animation-direction: alternate;
}

这个这样，当鼠标移出元素边界时，动画将从“内”无缝过渡到“外”。

实现这种方法会产生平滑高效的反向动画，精确响应鼠标移动。这是一个演示：

http://jsfiddle.net/JjHNG/35/

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