平滑过渡的CSS动画旋转 [英] Smooth CSS Transition Animation Rotation

问题描述

我创造了这个小提琴说明问题：

I have created this fiddle to demonstrate the problem:

http://jsfiddle.net/NfX56/

动画旋转和悬停似乎做工精细改变方向，但乒乓当我将鼠标悬停在该项目过渡跳动，而不是像的方向我想顺利逆转。

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.

下面是浏览器没有preFIX基本code：

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 code：

The relevant CSS code :

.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.

现在，所剩下的唯一事情就是暂停并重新启动快速旋转（未设置CH375复位吧！）

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

检测到一个错误以上，.spin第四行：悬停应非prefixed：

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屋！