CSS3 transition doesn’t work with display property [duplicate]

by

display:none; removes a block from the page as if it were never there.
A block cannot be partially displayed; it’s either there or it’s not.
The same is true for visibility; you can’t expect a block to be half
hidden which, by definition, would be visible! Fortunately, you can
use opacity for fading effects instead.
– reference

As an alternatiive CSS solution, you could play with opacity, height and padding properties to achieve the desirable effect:

#header #button:hover > .content {
    opacity:1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

(Vendor prefixes omitted due to brevity.)

Here is a working demo. Also here is a similar topic on SO.

#header #button {
  width:200px;
  background:#ddd;
  transition: border-radius .3s ease .15s;
}

#header #button:hover, #header #button > .content {
    border-radius: 0px 0px 7px 7px;
}

#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;    
}

#header #button > .content {
  opacity:0;
  clear: both;
  height: 0;
  padding: 0 8px;
  overflow: hidden;

  -webkit-transition: all .3s ease .15s;
  -moz-transition: all .3s ease .15s;
  -o-transition: all .3s ease .15s;
  -ms-transition: all .3s ease .15s;
  transition: all .3s ease .15s;

  border: 1px solid #ddd;

  -webkit-box-shadow: 0px 2px 2px #ddd;
  -moz-box-shadow: 0px 2px 2px #ddd;
  box-shadow: 0px 2px 2px #ddd;
  background: #FFF;
}

#button > span { display: inline-block; padding: .5em 1em }
<div id="header">
  <div id="button"> <span>This is a Button</span>
    <div class="content">
      This is the Hidden Div
    </div>
  </div>
</div>

More Related Contents:

  1. CSS Transition – eases in but doesn’t ease out?
  2. Why does my Transform snap back?
  3. How To Add CSS3 Transition With HTML5 details/summary tag reveal?
  4. Can't remove text decoration
  5. Which way to implement this picture in HTML CSS code and bootstrap
  6. What are the implications of using “!important” in CSS? [duplicate]
  7. Can I have an onclick effect in CSS?
  8. Why aren’t my absolutely/fixed-positioned elements located where I expect?
  9. How to remove the arrow from a select element in Firefox
  10. How to save CSS changes of Styles panel of Chrome Developer Tools?
  11. Why is vertical-align: middle not working on my span or div?
  12. Change cursor type on input type=”file” [duplicate]
  13. Why are button’s discouraged from navigation?
  14. Using display inline-block columns move down
  15. Line break (like ) using only css
  16. Turn off Chrome/Safari spell checking by HTML/css [duplicate]
  17. How to get a background image to print using css?
  18. How to set an image’s width and height without stretching it?
  19. Make flex items overlap
  20. HTML class attribute with spaces, it is a W3C valid class?
  21. Aligning elements left and center with flexbox
  22. How to set placeholder value using CSS?
  23. Title with bottom border smaller than width
  24. How to run the CSS3 animation to the end if the selector is not matching anymore?
  25. how to remove the dotted line around the clicked a element in html
  26. Is it possible to achieve a -like effect without using the tag?
  27. Why aren’t my bootstrap 4 columns the same height?
  28. How to make a flex item not fill the height of the flex container? [duplicate]
  29. Complete list of reasons why a css file might not be working
  30. What is HTML’s tag default display type?

Leave a Comment