CSS transition-delay on display

Question

I have an element. On hover it goes opacity: 0; in 500ms. After 500ms I need to make it to display:none;.

Is this possible by using transition-delay on the display property?

.myEl {
transition: opacity 500ms, display 0ms ease 500ms;
opacity: 1;
display: block;
}

.myEl:hover {
display:none;
opacity:0;
}

This code above doesn't work for me :(

No, transitions may not be applied to the display property. You could alternatively use visibility. — Gray Spectrum, Aug 08 '14 at 17:48
The thing is i need it removed from the dom, maybe can i dealy set it to positoin absolute? — Blagoh, Aug 08 '14 at 17:51
I recommend reading this: http://stackoverflow.com/questions/8049855/css-transitions-mixing-absolute-and-relative-positioning — Gray Spectrum, Aug 08 '14 at 17:53
solution was to not use position or display but to use height new fiddle: http://jsfiddle.net/onvpn995/2/ — Blagoh, Aug 08 '14 at 17:57
Hey @Blagoh! Please post your solution as an answer and accept it so that this question is completed :) — misterManSam, Aug 08 '14 at 20:45

Prashant · Answer 1 · 2014-08-08T21:28:14.100

-3

If you use "display:none"; you will not be able to have a transition. You Can use following:

.myEl {
transition: opacity 500ms;
opacity: 1;
display: block;
}

.myEl:hover {
opacity: 0;
visibility:hidden;
}

(as visibility:hidden; has almost the same effect as display:none)

edited Aug 08 '14 at 21:28

answered Aug 08 '14 at 19:52

Prashant

2

This will not have any transition, it will only hide the element – Zach Saucier Aug 08 '14 at 20:48

1 Answers1