CSS3 transition fadein with display:none

Question

I've got some element I want to fade with CSS3. It can be simply done by 2 classes with opacity: 0 and opacity: 1, but problem is faded element is some dropdown menu and it has elements under it, so even if it has opacity: 0, its still 'clickable' and elements under it are not.

If I add display: none; attribute, element is not animated.

Is it possible with css only to avoid it?

I've checked this but didnt find working solution

http://jsfiddle.net/Eh7jr/

If you want to disable it then you might probably want to use jquery as well. If so you can easily write the style for hover as well as disable the dropdown also. — Roy M J, Jul 07 '13 at 09:03
@RoyMJ I think purpose of CSS3 transitions is to dont use jQuery for this kind of animations. I know I could simply .fadeIn() but I want to stick to css3 — Adam Pietrasiak, Jul 07 '13 at 09:06

score 12 · Accepted Answer · answered Jul 07 '13 at 09:19

12

Instead of display:none, try using visibility: hidden;

FIDDLE

See this article which states:

visibility animates despite the CSS Basic Box Model spec saying “Animatable: no”

answered Jul 07 '13 at 09:19

Danield

121,619
37
226
255

3

visibility still blocks. – basickarl May 20 '16 at 14:35
1

works nice for tooltips in combination with @Ben's answer `pointer-events:none;` that prevents hover and click events on the target – Felix Geenen Oct 05 '17 at 22:41

score 9 · Answer 2 · answered Dec 09 '15 at 14:30

You can do it by 100% CSS pure code.

.menu > li > ul{
    display: none;
}
.menu > li:hover > ul {
    display: block;
    animation-duration: 0.5s;
    animation-name: fadeInFromNone;
    animation-fill-mode: forwards;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-name: fadeInFromNone;
    -webkit-animation-fill-mode: forwards;
    -ms-animation-duration: 0.5s;
    -ms-animation-name: fadeInFromNoneIE;
    -ms-animation-fill-mode: forwards;
}
@-webkit-keyframes fadeInFromNone {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeInFromNoneIE {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadeInFromNone {
    0% {
        opacity: 0
    }

    1% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

Using `display: none` when element is not `:hover` will make **fadeOut** instant (no animation at all). Still I couldn't find better solution till today. — maszynka, Jul 05 '17 at 13:34

score 2 · Answer 3 · answered Jul 07 '13 at 09:01

2

You can make an element not accept clicks with this:

.hidden
{
    pointer-events:none;
}

answered Jul 07 '13 at 09:01

Ben

10,106
3
40
58

1

Browser support is excellent, except of course for IE. http://caniuse.com/#feat=pointer-events – Ben Jul 07 '13 at 09:06
well then I cant accept it, site is unusable when you will go to dropdown menu position clicking on 'register' inside header covered by dropdown opacity: 0. – Adam Pietrasiak Jul 07 '13 at 09:07
So then the logical answer to your question is that it is *not* possible with CSS only, if you are needing IE support. You'll want to use JavaScript instead. – Ben Jul 07 '13 at 09:09

score 1 · Answer 4 · answered Mar 06 '14 at 15:39

Noticed the example in the JS Fiddle above was broken, fixed the code here:

 <style>
div {
    position: absolute;
    transition: all 2s;
}
div.opa {
    opacity: 0;
    visibility:hidden;
}
</style>
<div class=opa>dsdsds</div>
<br> <br>
<p><a href="#">clickme</a></p>
<script>
$('a').click(function(){
    $('div').toggleClass('opa');    
})
</script>

Fixed the fiddle:

Bhojendra Rauniyar · Answer 5 · 2013-07-07T09:26:51.703

0

try to make an element that do not accept click by applying z-index to negative value.

a{z-index: -999;}

Oh! I understood your problem. You can set visibility: collapse; better than hidden I think.

edited Jul 07 '13 at 09:26

answered Jul 07 '13 at 09:03

Bhojendra Rauniyar

83,432
35
168
231

CSS3 transition fadein with display:none

5 Answers5

Linked