小编Go *_*ate的帖子

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

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/