CSS Transition delay in but not out

Question

Using CSS I'm trying to get a transition delay to work as follows. I want a 1s delay in but I want 0s delay out.

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

I have the following jsFiddle

Answer 1

Have the delay under your .active block, since the element has the active class when it is transitioning to green:

.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

slightly more concise and maintainable code, set the transition-delay property instead of rewriting the whole transition:

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

demo

documentation: https://developer.mozilla.org/en/docs/Web/CSS/transition

Answer 3

The following worked for me:

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

You don't need an !important declaration because the cascade automatically prefers the later rule when you overwrite a property.

You also don't need to rewrite the entire transition rule since you specifically want to use the same transition with a different delay rather than a different transition.

The reason it's this way around (with the 0s delay by default) is that when you remove the .active class you stop applying its colour as well as its transition delay so the delay in the .sample class is applied.