我有一个元素,当你无限期地悬停在它上面时,它会旋转。向外悬停时,动画将停止。简单:
@-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度。我想动画回到那个位置,但我在语法上遇到了一些麻烦。
任何输入都是很棒的!
发布于 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>
发布于 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;
}
发布于 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/
https://stackoverflow.com/questions/7988962
复制相似问题