我创造了这个小提琴来证明这个问题：
动画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;
试图平滑动画,使符号平滑地反转方向,但我似乎无法正确对待……任何帮助都会很棒！
解决方法
我需要考虑很多来解决你的要求;但我终于找到了解决方案
相关的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);
}
