Display none after css animation ended

css transition
css animation display: none to block
css transition display slide down
show hide div with transition css
display none after some time css
jquery animate display: none
transition display: none to flex
display none at end of animation

I have a working animation that starts on load with pure CSS. The problem with both opacity and visibility is that even if the div is hidden, it still takes up space.

Question

How can I make the div disapear like display: none after the animation is done?

Notes
  • I would prefer to have a pure CSS solution. The less hackish solution, the better.
  • I've seen similar questions, but not exactly this case and no good answers for this problem.
  • I use animation and not transition because it animates on load.

.message.success {
  background: #28a745;
  color: #fff;
  animation: autohide 2s forwards;
  padding: 1rem;
}

@keyframes autohide {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
<div class="message success">
  Success!
</div>

This text below is expected to jump up after animation is done.

You could use the height property to achieve this effect:

@keyframes autohide {
  0% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  99% {
    height: auto;
    padding: 1rem;
  }
  100% {
    opacity: 0;
    height: 0;
    padding: 0;
  }
}

height is kept auto until near the end of the animation (99%), then set to 0 as it completes.

Animating from "display: block" to "display: none", When the element is visible, first animate the opacity, then, when that's finished, make it display: none . When the element is invisible, first make it display: block , then (while it's still visually hidden, but existing on the page), animate the opacity. There’s a technique you can use to animate from display: none, what you need to do is add a class that makes the element display: block first, then add a class that will animate the element, however before adding the animation class you need to force a reflow on that element.

You could set to zero the padding and the font-size at the last keyframe

.message.success {
  background: #28a745;
  color: #fff;
  animation: autohide 2s forwards;
  padding: 1rem;
}

@keyframes autohide {
  0% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  95% {  
    opacity: 0;
    padding: 1rem;
    font-size: inherit;
  }
  100% {
    padding: 0;
    font-size: 0;
    opacity: 0;
  }
}
<div class="message success">
  Success!
</div>

This text below is expected to jump up after animation is done.

Animating from display: none with CSS and callbacks, There's a technique you can use to animate from display: none , what you need to do is add a class that makes the element display: block first, then add a class that will animate the element, however before adding the animation class you need to force a reflow on that element. Unfortunately, with CSS there’s no way to perform a callback when an animation is complete. With JavaScript, it’s possible to detect the end of a CSS transition or animation and then trigger a function. Separate the roles. Handle the animations (with transitions or keyframes) in your CSS; handle the event timing and triggers in your JavaScript.

There you go i think this is what you want.

By giving height to 0 works perfectly with transition

.message.success {
  background: #28a745;
  color: #fff;
  animation: autohide 2s forwards;
  transition: height 2s ease;
}

@keyframes autohide {
  0% {
    opacity: 1;
    height: auto;
  }
  90% {
    opacity: 1;
    height: auto;
  }
  100% {
    opacity: 0;
    height: 0;
  }
}
<div class="message success">
  Success!
</div>

This text below is expected to jump up after animation is done.

Animation Display None to Block - CSS, <p class="paragraph">Here you will witness the power of CSS animation. 4. </p>. 5. . 6. <div class="wrapper">. 7. <button class=" button� Display: none does find appropriate application in live scenarios, though. For example, if you're building a responsive site, you might include elements that are available for one display size but not for others. You can use display: none to hide that element, and then turn it back on with media queries later.

CSS Snippet for “Animating” both Display and Transform • James , Front-end architect. Speaker & writer. Sass, CSS animation, RWD & WP. @ keyframes grow { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0;� The animationend event occurs when a CSS animation has completed. For more information about CSS Animations, see our tutorial on CSS3 Animations. When a CSS animation plays, there are three events that can occur: animationstart - occurs when the CSS animation has started; animationiteration - occurs when the CSS animation is repeated

Transitioning Hidden Elements, If you've ever tried to use a CSS transition on an element with the You can use the hidden attribute or display: none; to avoid these issues. and ended up learning a lot about document flow, transition events, and By hooking into this, we can remove the hidden attribute after our transition is complete. See the Pen Hide Elements with CSS – display: none; by Adam Laki on CodePen. As you see in the example – by clicking the toggle button – when the element is hidden it disappears from the flow. In responsive design hiding, something at a breakpoint is sometimes, and your best solution will be the display property because the element’s

CSS animation-fill-mode Property, none, Default value. Animation will not apply any styles to the element before or after it is executing. forwards, The element will retain the style values that is set� 6. display. display is probably the most-used element-hiding method. A value of none effectively removes the element as if it never existed in the DOM.. See the Pen hide with display: none by

Comments
  • It works, as long as there is no padding. If there is padding, it will still take up some of the space.
  • Can you set the padding to zero as soon as the animation hits 100%?
  • Yes, that worked! I set the padding on 99% and then to 0 at 100%. Works perfectly. Thanks!
  • Yes it works. What I forgot in my snippet was that I also have padding. With padding this solution only remove a part of the space. I've updated my question.
  • Oh NP it happens! set padding as well in animation form max to min