Question

使用CSS我试图让转换延迟工作如下。我希望延迟1秒，但我希望0秒延迟。

transition: width 0.3s ease-in 1s;
transition: width 0.3s ease-out 0s;

我有以下jsFiddle

Answer 1

在.active块下有延迟，因为元素在转换为绿色时具有活动类：

.sample {
    padding: 20px;
    background-color: #efefef;
    transition: background-color 0.3s ease-out 0s;
}
.sample.active {
    background-color: green;
    transition: background-color 0.3s ease-in 1s;
}

JSFiddle

Answer 2

稍微简洁且可维护的代码，设置transition-delay属性而不是重写整个transition：

.sample {
    padding: 20px;
    background-color: #efefef;
    transition: background-color 0.3s ease-out 0s;
}
.sample.active {
    background-color: green;
    transition-delay: 1s;
}

demo

文档：https://developer.mozilla.org/en/docs/Web/CSS/transition

Answer 3

以下对我有用：

.sample {
    padding: 20px;
    background-color: #efefef;
    transition: background-color 0.3s ease-in 0s;
}
.sample.active {
    background-color: green;
    transition-delay: 1s;
}

您不需要!important声明，因为当您覆盖属性时，级联会自动更喜欢后面的规则。

您也不需要重写整个转换规则，因为您特别希望使用相同的转换与不同的延迟而不是不同的转变。

这种方式（默认情况下0s延迟）是因为当你删除.active类时，你会停止应用它的颜色以及它的转换延迟，所以适用.sample类的延迟。

Answer 4

试试这个

<强> CSS

.sample {
    padding: 20px;
    background-color: #efefef;
    -webkit-transition: background-color 0.3s ease-out 0s;
    transition: background-color 0.3s ease-out 0s;
}
.sample.active {
    background-color: green;
    -webkit-transition: background-color 0.3s ease-in 1s !important;
    transition: background-color 0.3s ease-in 1s !important;
}

<强> DEMO HERE

CSS转换延迟但没有输出

4 个答案: