Question

我有这个代码在悬停时旋转图像：

img:hover {
    -webkit-animation-name: spin;
    -webkit-animation-duration: .15s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: .15s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: .15s;
    -ms-animation-iteration-count: 1;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: .15s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

http://jsfiddle.net/79FHN/1/

我希望它在不悬停时旋转到另一个方向。我怎样才能做到这一点？

Answer 1

我可以在很大程度上重构您的代码，只需

Demo

img {
    -webkit-transition: 1s linear;
    transition: 1s linear;
}

img:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}

您的代码的问题是，您使用的@keyframes只是动画，所以一旦触发，您需要编写一个单独的关键帧进行反转。由于你的动画并不复杂，我更喜欢使用简单的CSS3属性来完成工作。

如果您觉得动画轻推了您的图标，或者您故意想要轻推鼠标，则可以使用transform-origin属性。

感谢@Second Rikudo指出了linear问题。

CSS3旋转动画：在取消悬停时旋转

1 个答案: