平滑的 CSS 过渡动画旋转

2022-01-16 00:00:00 animation rotation css

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

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 个元素(自旋和阴阳)，我将其中一个设置为向一个方向旋转，另一个设置为反向旋转，并且速度更快.当两者都在运行时，净效果是向一个方向旋转；当只有一个旋转时，净效果是相反的.

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);
}

相关文章