CODEWITHSUNDEEP
htmlcss
Matúš Dúbrava
Matúš Dúbrava

Reputation: 801

Is CSS transition breaking transform property (on hover)?

I have the following issue. When I set CSS transition with transform (translateZ on hover) strange things start happening. If you just hover over the element it works as expected, but when you start quickly hovering on and off (in quick succession), transform starts breaking and the effect is multiplied (in the case of positive transformZ, the element will move "closer and closer" to you, even though it returns to the specified position few moments after).

Here is the code, HTML:

<div id="wrapper">
    <ul>
        <li></li>
    </ul>
</div>

and CSS:

#wrapper {
    perspective: 2000px;
}

ul li {
    width: 200px;
    height: 40px;
    background: #0160ad;
    transition: all 0.3s linear;
}

ul li:hover {
    -webkit-transform: perspective(2000) translateZ(300px);
}

So am I doing something wrong here or it is just the way it is and has to be done some other way to prevent this from happening.

fiddle

Upvotes: 0

Views: 1232

Answers (1)

vals
vals

Reputation: 64164

When you are transitioning something, it is always a good idea to have the property set in both states. And, as similar as posible (keep unused properties the same).

So, set

ul li {
    width: 200px;
    height: 40px;
    background: #0160ad;
    transition: all 0.3s linear;
    -webkit-transform: perspective(2000) translateZ(0px);
}

ul li:hover {
    -webkit-transform: perspective(2000) translateZ(300px);
}

and it works ok: fiddle

Upvotes: 2

Related Questions