CSS3旋转动画：悬停时旋转

W.Doch 发表于 Dev

W.是的

我有以下代码在悬停时旋转图像：

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/

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

外星人先生

我可以在很大程度上重构您的代码，您所需要做的就是

演示版

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

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

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

如果您觉得动画会微调您的图标，或者您有意在悬停时微调，则可以使用transform-origin属性。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。