CODEWITHSUNDEEP
csscss-transitions
ngplayground
ngplayground

Reputation: 21617

CSS Transition delay in but not out

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

Upvotes: 22

Views: 17950

Answers (4)

Drew Green
Drew Green

Reputation: 51

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.

Upvotes: 2

Luca
Luca

Reputation: 9705

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

Upvotes: 6

George
George

Reputation: 36784

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

Upvotes: 30

Luís P. A.
Luís P. A.

Reputation: 9739

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

Upvotes: 1

Related Questions