CSS Transition delay in but not out -

using css i'm trying transition delay work follows. want 1s delay in want 0s delay out.

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

i have following jsfiddle

have delay under .active block, since element has active class when transitioning 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