Set different ease-in and ease-out values for a single transition without affecting the other transitions using CSS?

user_8524922 0
Viewed 116

Really simple. I just want to do this:

.div
{
    padding-top: 16px;
    transition: transform 250ms ease-in-out, filter 1000ms ease-in 250ms ease-out;
}
.div:hover
{
    transform: translateY(-16px);
    filter: brightness(110%) drop-shadow(0px 16px 16px red);
}

I only want to make the filter ease-in slower, yet ease-out with the transform at the same time.

It's all correct CSS till this part filter 1000ms ease-in 250ms ease-out; which is just an illustration code to what I wished I could do.

I also tried

transition: transform 250ms ease-in-out, filter 1000ms ease-in, filter 250ms ease-out;

But setting the filter more than 1 time just overrides the previous one. Is there a CSS-only solution for this?

css
1 Answers

Yes, there is.

Since currently CSS does not support setting both ease-in and ease-out individually for a transition without affecting other transitions, you'll have to use a "hack" which is to use the :not(:hover) event to set the filter's ease-out.

.div:not(:hover)
{
    transition: transform 250ms ease-in-out, filter 250ms ease-out;
}

Now every time you stop hovering, the filter is overridden resetting the ease-in property to default while simultaneously setting ease-out to whatever duration wanted giving the effect precisely described.

The ease-in is actually ignored inside :not(:hover) so it doesn't matter if it is a default value or infinity. Knowing the previous, you could set both of ease-in-out inside :not(:hover) if you want and it'd make 0 difference.

Full code:

.div
{
    transition: transform 250ms ease-in-out, filter 1000ms ease-in;
}
.div:hover
{
    transform: translateY(-16px);
    filter: brightness(110%) drop-shadow(0px 16px 16px red);
}
.div:not(:hover)
{
    transition: transform 250ms ease-in-out, filter 250ms ease-out;
}

Note that not only the filter's ease-out is overridden, but the entire transition which is why you have to set all other transitions in it again even though you changed only one.

This solution is not only for hovering as it could be replicated with other events. It is but a matter of changing :hover in the code above to whatever event you seek.

user_85249220
Related