平滑的 CSS 过渡动画旋转

Question

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

http://jsfiddle.net/NfX56/

动画旋转和悬停似乎可以很好地改变方向，但是当我将鼠标悬停在项目上进行转换时切换是跳跃的，而不是像我想要的那样平滑地反转方向。

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

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

我一直在尝试解决以下问题：

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

试图使动画平滑，以便符号平滑地反转方向，但我似乎不太正确......任何帮助都会很棒！

http://jsfiddle.net/NfX56/

Answer 1

好吧，这个：

css:

#test {
    margin: 100px;
    height: 200px; width: 200px;
    background: black;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

#test:hover {
    background: gray;
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    transform: rotate(1080deg);

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

html:

<div id="test"></div>

DEMO

您遇到的问题是由于过渡缓慢。由于 css 可以有任何逻辑，当您悬停时，榆树将从“0”或“360”或任何您的设置重新开始。所以永远不会顺利，因为 css 无法知道悬停发生之前的最后一个“deg num”是什么......

但是！你可以试试stylus

“Stylus 具有强大的语言内函数定义。”

希望得到帮助：/

Answer 2

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

demo

相关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:hover 的第四行应该是无前缀的：

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

corrected demo

在 HTML 中添加一个额外的元素，我已经能够使旋转变化平滑。

smooth transition demo

额外的 CSS 是：

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