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为单个属性获取此效果，但因为我需要同时转换多个属性，所以我需要使用简写和逗号分隔它们。

这是否有功能？仅在设置属性和延迟时似乎是默认值，但我尝试background 0.4s initial，它完全忽略了计时器。

Answer 1

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

transition: all 0 linear 0.4s;

或者：

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

这些将在0.4秒延迟后立即过渡。

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

1 个答案: