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