悬停时连续的CSS旋转动画，悬停时动画回到0度
悬停时连续的CSS旋转动画，悬停时动画回到0度
提问于 2011-11-03 08:24:26
我有一个元素，当你无限期地悬停在它上面时，它会旋转。向外悬停时，动画将停止。简单：
@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
.elem:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}但是，当您向外悬停时，动画会突然停止，恢复为0度。我想动画回到那个位置，但我在语法上遇到了一些麻烦。
任何输入都是很棒的！
回答 7
Stack Overflow用户
回答已采纳
发布于 2011-11-03 18:17:36
解决方案是在.elem中设置默认值。但是这种消除在-moz中工作得很好，但是还没有在-webkit中实现
看看我从你的小提琴更新过来的：http://jsfiddle.net/DoubleYo/4Vz63/1648/
它在Firefox上运行得很好，但在Chrome上就不行
.elem{
position: absolute;
top: 40px;
left: 40px;
width: 0;
height: 0;
border-style: solid;
border-width: 75px;
border-color: red blue green orange;
transition-property: transform;
transition-duration: 1s;
}
.elem:hover {
animation-name: rotate;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}<div class="elem"></div>
Stack Overflow用户
发布于 2015-06-07 01:44:24
下面是一个简单可行的解决方案：
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
.elem:hover {
-webkit-animation:spin 1.5s linear infinite;
-moz-animation:spin 1.5s linear infinite;
animation:spin 1.5s linear infinite;
}Stack Overflow用户
发布于 2011-12-29 07:23:08
我试了几次，但我还是能让你的jsFiddle正常工作(只适用于Webkit )。
当用户重新进入div时，动画速度仍然存在问题。
基本上，只需将当前旋转值设置为一个变量，然后对该值进行一些计算(以转换为度数)，然后在鼠标移动和鼠标输入时将该值设置回元素。
查看jsFiddle：http://jsfiddle.net/4Vz63/46/
有关更多信息，包括如何添加跨浏览器兼容性，请查看本文：http://css-tricks.com/get-value-of-css-rotation-through-javascript/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7988962
复制相关文章
相似问题