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

Like this [DEMO](https://jsfiddle.net/lmgonzalves/58jbuxL5/2/)? Also to override `delay` you only need `transition-delay: 1s;`. — lmgonzalves, Jul 17 '15 at 15:42
possible duplicate of [Different CSS transition-delays for hover and mouseout?](http://stackoverflow.com/questions/5921073/different-css-transition-delays-for-hover-and-mouseout) -- only difference is the hover, but the basic answer is the same and the trigger event is not defined in this question. — misterManSam, Jul 17 '15 at 15:43

score 28 · Accepted Answer · answered Jul 17 '15 at 15:43

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

Luca · Answer 2 · 2015-07-17T15:51:39.027

5

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

edited Jul 17 '15 at 15:51

answered Jul 17 '15 at 15:45

Luca

9,259
5
46
59

Drew Green · Answer 3 · 2015-07-17T16:10:05.583

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.

score 1 · Answer 4 · answered Jul 17 '15 at 15:43

Try this

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 Transition delay in but not out

4 Answers4