CODEWITHSUNDEEP
csstransition
ditto
ditto

Reputation: 6307

transition opacity with delay

I want to fade out an element after 3 seconds. I'm currently using an animation to do this but I've just learned of transition-delay, so I believe I may be able to remove the animation and do it through a transition. Is this possible?

My original code is:

.foo {
    animation: fadeOut 3s cubic-bezier(0.645,  0.045, 0.355, 1.000)
}
@keyframes fadeOut {
    80%{
        opacity: 1
}
    100% {
        opacity: 0
}
}

Here is my attempt at a transition:

.announcement {
  display: block;
  font-size:22px;
  transition: opacity 0.4s cubic-bezier(0.645,  0.045, 0.355, 1.000);
  transition-delay :3s;
  opacity:0;
}

<div class="announcement">asdasd</div>

http://jsbin.com/vejewukusi/edit?html,css,output

Is this possible without adding another CSS class?

Just to make things more clear, I want to append a div with a class, wait 3 seconds, and then fade it out, and do this without using keyframes.

Upvotes: 1

Views: 10974

Answers (1)

Thomas Bormans
Thomas Bormans

Reputation: 5372

Does this solve your problem: JSFiddle? I have added an animation and a little function to animate the opacity:

.test {
    animation: opacity 1s;
}
@keyframes opacity {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

Upvotes: 0

Related Questions