CODEWITHSUNDEEP
csscss-transitions
Kay Lakeman
Kay Lakeman

Reputation: 45

css transition steps fails when mouse leavs element to early

I have a question about the CSS3 steps() function.

When you enter the element with your mouse, the transition starts. When you're mouse leaves the element before the animation is ready, it returns to it's original state. But the steps() isn't working anymore. Is there a workaround for this?

My fiddle: Fiddle

My 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;
                }
            }

Can somebody help me with this?

PS: I already found this: CSS transition on png sequence using steps 1, but this doesn't solve my problem.

Upvotes: 0

Views: 56

Answers (1)

Alvaro Montoro
Alvaro Montoro

Reputation: 29695

You can use a workaround by using 3D transforms. From your code, I have added the transform to flip the arrow, and a transition for the transform:

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

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

You can see a working example here: http://jsfiddle.net/1t5u3r3L/1/

Upvotes: 3

Related Questions