CSS转换延迟但没有输出

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

演示

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