CSS Delayed Transition, but Not Exit

Question

Using CSS, I am trying to get the transition delay to work as follows. I want 1s delay, but I want 0s delay.

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

I have jsFiddle

Answer 1

The delay in your .active block is because the element has an active class when it goes 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

a bit more concise and supported code, set the transition-delay property instead of overwriting all the transition :

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

demo

: 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 do not need a !important declaration because the cascade automatically prefers a later rule when overwriting a property.

You also do not need to rewrite the entire transition rule, since you specifically want to use the same transition with a different delay, and not with another transition.

The reason this happens (with a default delay of 0s ) is that when you remove the .active class .active you stop applying your color, as well as its transition delay, so the delay in the .sample class .sample applied.

Answer 4

try it

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