平滑CSS转换动画旋转 [英] Smooth CSS Transition Animation Rotation

问题描述

我创建了这个小提琴来演示问题：

I have created this fiddle to demonstrate the problem:

http://jsfiddle.net/NfX56/

动画ROTATION和HOVER似乎适用于更改方向，但是当我将鼠标悬停在该项目上时，它会显示TOGGLE

Animation ROTATION and HOVER seems to work fine for changing direction but the TOGGLE when I hover over the item for transition is jumpy and not a smooth reverse of direction like I would like.

这里是没有浏览器前缀的基本代码：

Here is the basic code without browser prefix:

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spin {
    animation: spin 3.5s linear 0s infinite normal;
    width: 100px;
    height: 100px;
    border-radius: 50px 50px 50px 50px;
    overflow: hidden;
    margin-left: -50px;
    margin-top: -50px;
    top: 50%;
    left: 50%;
    position: absolute;
}
.spin:hover {
    animation: spin 3.5s linear 0s infinite reverse;
}

我一直在试图玩以下游戏：

I have been trying to play around with the following:

transition-property: transform;
transition-duration: 0s;
transition-timing-function: ease-in-out;

为了平滑动画，使符号平滑地逆转方向，正确...任何帮助都会很棒！

In an attempt to smooth the animation so that the symbol smoothly reverses direction but I can't quite seem to get it right... any help would be great!

http://jsfiddle.net/NfX56/

推荐答案

我需要考虑很多来解决您的要求;但我终于找到了解决方案

I needed to think a lot to solve your request; but I have finally find the solution

相关的CSS代码：

.spin {
    animation: spin 2s linear 0s infinite reverse;
    -moz-animation: 2s linear 0s reverse none infinite spin;
    -webkit-animation: spin 2s linear 0s infinite reverse;
    -0-animation: spin 2s linear 0s infinite reverse;
    -webkit-animation-play-state: paused;
    -o-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
.spin:hover {
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    -webkit-animation-play-state: running;
}
.yin-yang {
    animation: spin 4s linear 0s infinite normal;
    -moz-animation: 4s linear 0s normal none infinite spin;
    -webkit-animation: spin 4s linear 0s infinite normal;
    -0-animation: spin 4s linear 0s infinite normal;
}

诀窍：由于你已经有2个元素（spin和yin-yang）我设置其中一个在一个方向旋转，另一个反向旋转，更快。当两者都运行时，净效果是沿一个方向旋转;当只有一个旋转时，净效果是相反的。

The trick: since you already had 2 elements (spin and yin-yang) I set one of them to rotate in one direction, and the other one to rotate in reverse, and more fast. When both are running, the net effect is to rotate in one direction; when only one is rotating, the net effect is the opposite.

现在，剩下的唯一的事情是暂停和重新启动快速旋转（不设置重置！ ）

Now, the only thing that is left is to pause and restart the fast rotation (not setting reseting it !)

检测到上面的一个错误，.spin：hover的第四行应该是未定义的前缀：

Detected one mistake on the above, the fourth line of .spin:hover should be the un-prefixed:

.spin:hover {
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}

修正演示

在HTML中添加一个额外的元素，我已经能够使旋转更改顺利。

Adding an extra element in the HTML I have been able to make the rotation change smooth.

平滑过渡演示

额外的CSS是：

.acc {
    transition: all 4s ease-out;
}
.spin:hover .acc {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

这篇关于平滑CSS转换动画旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！