如何使用延迟计时器实现 CSS 转换但没有任何缓动功能？

Question

我想在计时器后进行样式转换，但没有任何缓动。因此，例如，在计时器结束后立即将背景颜色从白色更改为紫色。

.text {
    display: inline-block;
    border: solid 1px #9e9e9e;
    color: #333;
    background: #f1f2f2;
    margin: 7px;
    padding: 7px;
    font-family: sans-serif;
}
.text:hover {
    background: #651964;
    color: white;
}
.trans1 {    
    -moz-transition: color 0.4s, background 0.4s;
    -o-transition: color 0.4s, background 0.4s;
    -webkit-transition: color 0.4s, background 0.4s;
    transition: color 0.4s, background 0.4s;
}
.trans2 {
    -moz-transition-property: background;
    -o-transition-property: background;
    -webkit-transition-property: background;
    transition-property: background;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

<span class="text trans1">Text Text</span><span class="text trans2">Text Text</span>

在示例中，您可以看到 .trans2 如何在计时器完成后立即从白色变为紫色，而不是在计时器的持续时间内逐渐减弱。

我知道如何通过使用 transition-property 和 transition-delay 为单个属性获得这种效果，但是因为我需要同时转换多个属性，所以我需要使用 shorthand 和逗号分隔它们。

有这个功能吗？只设置属性和延迟似乎是默认的，但我试过background 0.4s initial，它完全忽略了定时器。

Answer 1

shorthand同时支持延迟和持续时间。你可以使用这样的东西：

transition: all 0 linear 0.4s;

或者：

transition: background 0 linear 0.4s, color 0 linear 0.4s;

这些将在 0.4 秒延迟后立即转换。

如何使用延迟计时器实现 CSS 转换但没有任何缓动功能？

How to achieve CSS transitions with delay timers but without any easing function?

css-transitions