Search code examples
csscss-transitionscss-transforms

Can you have different transition times on the same transition property?

I have a settings button (img with an icon as the src) that I want to spin when the cursor is hovering, and then scale down and back to normal when the user presses on it.

#settings-button:hover {
    transition: transform 1s ease-out;
    transform: rotate(360deg);
}

#settings-button:active {
    transition: transform 50ms ease-out;
    transform: scale(0.90);
}

With the current code, it scales down at the correct speed, but it takes 1s to get back to the normal size. If I change the duration in :hover it works fine, but then it spins so fast you can't see it.

Is there anyway to have different durations for the same transition property?

Solution

  • You can accomplish this with CSS Houdini.

    But it's possible to achieve what you're looking for, by simply having 2 CSS animations and toggling between them with JavaScript. One will simply be faster or slower than the other.