css转换步骤失败，当鼠标元素提前到达

我有一个关于CSS3 steps（）函数的问题。css转换步骤失败，当鼠标元素提前到达

当您用鼠标输入元素时，转换开始。在动画准备好之前，当您用鼠标离开元素时，它将返回到原始状态。但是步骤（）不再有效。有没有解决方法？

我的小提琴：Fiddle

我SCSS：

* { 
    background: #f00; 
} 

.block { 
       width: 38px; 
       height: 38px; 
       background-image: url('http://s8.postimg.org/gr7lvdms5/sprite_test.png'); 
       transition: all 0.5s steps(15); 
       background-position: 0 0; 
       position: absolute; 
       left: 100px; 
       top: 100px; 

       &:hover { 
        background-position: -570px 0; 
       } 
      }

有人可以帮我吗？

PS：我已经发现这个： CSS transition on png sequence using steps 1，但这并不能解决我的问题。

来源

2015-02-09 Kay Lakeman

只是出于好奇，为什么不解决你的问题是你链接的答案？ – vals 2015-02-09 17:54:07

它并没有解决我的答案，因为我希望它始终在鼠标悬停上运行，这些线程在鼠标离开时开始运行。 – 2015-02-10 08:44:36

您可以使用3D变换的解决方法。从你的代码，我已经加入了transform翻转箭头，为transform一个transition：

transform: rotateX(0deg); 
transition:transform 0.5s; 

&:hover { 
     transform: rotateX(-180deg); 
    }

这里你可以看到一个工作示例：http://jsfiddle.net/1t5u3r3L/1/

来源

2015-02-09 16:10:37

它以优雅的方式解决了问题（1起） – vals 2015-02-09 17:55:29

嗨，Alvaro，谢谢你的回答！这确实解决了这个问题。接下来的问题是，还有一种情况是方块完全填满白色，所以箭头将方块拉到白色。这就是我选择精灵的原因。 – 2015-02-10 08:46:58

我不明白。这对你当前的照片来说不是问题吗？箭头在白色背景上是白色的 – 2015-02-10 14:45:37

css转换步骤失败，当鼠标元素提前到达

回答

相关问题