Question

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

动画ROTATION和HOVER似乎在改变方向时工作正常，但是当我将鼠标悬停在项目上以进行过渡时，TOGGLE是跳跃的，而不是像我想的那样平滑地反转方向。

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

@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

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

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的第四行：悬停应该是无前缀的：

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

Answer 2

好吧，这个：

的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可以有任何逻辑，当你悬停时，elm将从“0”或“360”或任何你的设置重新开始。所以永远不会顺利，因为在发生悬停之前，css无法知道最后一个“deg num”是什么......

然而！你可以尝试stylus

“Stylus具有强大的语言内功能定义。”

希望这有帮助：/

平滑的CSS过渡动画旋转

2 个答案:

demo