CSS转换延迟输入但未输出

使用CSS，我试图获得一个转换延迟，如下所示。我想要1s的延迟，但我想要0s的延迟

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

我有以下几点

试试这个

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

---

在

.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;
}

---

稍微更简洁和可维护的代码，设置

转换延迟

属性，而不是重写整个

转换

：

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

文档：

以下几点对我很有用：

您不需要

！重要信息

声明，因为当您覆盖属性时，级联会自动首选后面的规则

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

采用这种方式的原因（默认情况下使用

0s

延迟）是当您删除

.active

类时，您停止应用其颜色以及转换延迟，因此应用

.sample

类中的延迟。

像这样吗？同样要覆盖

延迟

您只需要

转换延迟：1s

。的可能重复--唯一的区别是悬停，但基本答案是相同的，并且触发事件未在该问题中定义。

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