CSS Transition 延迟进入但不退出

Question

我正在尝试使用 CSS 使转换延迟按如下方式工作。我想要 1 秒的延迟，但我想要 0 秒的延迟。

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

我有以下 jsFiddle

Answer 1

在 .active block 下设置延迟，因为该元素在转换为绿色时具有 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