平滑的CSS过渡动画旋转

Question

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

http://jsfiddle.net/NfX56/

动画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

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

演示

相关的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;
}

更正了演示

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

平滑过渡演示

额外的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>

演示版

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

然而！你可以尝试手写笔

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

希望这有帮助：/