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

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?

CodePudding user response：

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.

CodePudding user response：

Solution to the issue I was having.

#settings-button:hover {
    animation: rotate 1s ease-in-out;
}

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

@keyframes rotate {
    0% {transform: rotate(-360deg)};
}