同一个转换 属性 可以有不同的转换时间吗？

Question

我有一个设置按钮（带有图标作为 src 的 img），我想在光标悬停时旋转它，然后在用户按下它时缩小并恢复正常。

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

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

使用当前代码，它以正确的速度缩小，但需要 1 秒才能恢复到正常大小。如果我在 :hover 中更改持续时间，它可以正常工作，但它旋转得如此之快以至于你看不到它。

同一个过渡是否有不同的持续时间属性？

Answer 1

您可以使用 CSS Houdini 完成此操作。

但您可以通过简单地使用 2 个 CSS 动画并使用 JavaScript 在它们之间切换来实现您想要的效果。一个只会比另一个快或慢。

Answer 2

解决我遇到的问题。

#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)};
}