CSS Animation and Display None

by

CSS (or jQuery, for that matter) can’t animate between display: none; and display: block;. Worse yet: it can’t animate between height: 0 and height: auto. So you need to hard code the height (if you can’t hard code the values then you need to use javascript, but this is an entirely different question);

#main-image{
    height: 0;
    overflow: hidden;
    background: red;
   -prefix-animation: slide 1s ease 3.5s forwards;
}

@-prefix-keyframes slide {
  from {height: 0;}
  to {height: 300px;}
}

You mention that you’re using Animate.css, which I’m not familiar with, so this is a vanilla CSS.

You can see a demo here: http://jsfiddle.net/duopixel/qD5XX/

More Related Contents:

  1. Using CSS for a fade-in effect on page load
  2. CSS3 background image transition
  3. css3 transition animation on load?
  4. CSS 3 slide-in from left transition
  5. Simulating transform-origin using translate
  6. How to prevent Webkit text rendering change during CSS transition
  7. Pure CSS scroll animation
  8. CSS3 transition on click using pure CSS
  9. Two-tone background split by diagonal line using css
  10. Expand div from the middle instead of just top and left using CSS
  11. CSS transition auto height not working [duplicate]
  12. CSS3 Fade Effect
  13. CSS: Animation vs. Transition
  14. Animating max-height with CSS transitions
  15. CSS transitions with calc() do not work in IE10+
  16. CSS how to make an element fade in and then fade out?
  17. How can I transition height: 0; to height: auto; using CSS?
  18. How to transition CSS display + opacity properties
  19. Can I apply a CSS transition to the overflow property?
  20. CSS3 Transform affecting other elements with chrome/safari
  21. Does Internet Explorer support CSS transitions?
  22. Delay mouseout/hover with CSS3 transitions
  23. when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border
  24. CSS transition between left -> right and top -> bottom positions
  25. CSS transition fade in
  26. Image moves on hover when changing filter in chrome
  27. CSS3 transitions on pseudo-elements (:after, :before) not working?
  28. webkit transform blocking link
  29. Drawing border colors during a CSS transition
  30. Why does enabling hardware-acceleration in CSS3 slow down performance?

Leave a Comment