当鼠标提前离开元素时，CSS 过渡步骤失败

Question

我对 CSS3 steps() 函数有疑问。

当您用鼠标进入元素时，过渡开始。当你的鼠标在动画准备好之前离开元素时，它会返回到它的原始状态。但是 steps() 不再起作用了。有解决办法吗？

我的 fiddle :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 ，但这并不能解决我的问题。

Answer 1

您可以通过使用 3D 变换来解决问题。从您的代码中，我添加了 transform 来翻转箭头，并为 transform 添加了 transition:

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

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

您可以在此处查看工作示例:http://jsfiddle.net/1t5u3r3L/1/