Slide out animation with keyframes and display: none;

Question

I've found this fiddle with a slide-down animation using keyframes and display: none;. It works perfectly. How can I make the same animation but as a slide-out, so when the container disappears? What do I have to change on this existing fiddle here: https://jsfiddle.net/simurai/A9kWm/? At the moment it is not animated, when it disappears.

Any ideas?

score 3 · Answer 1 · answered Nov 21 '17 at 13:59

3

You don't really want to use keyframes for this, you want to use transitions.

div.popin {
  background: pink;
  padding: 0 5px;
  height: 0;
  opacity: 0;
  line-height: 50px;
  overflow: hidden;
  transition: all 600ms ease-in-out;
}

.container:hover div.popin {
  height: 50px;
  opacity: 1;
}

<div class="container">
  <div class="popin">Hello</div>
  <h1>Hover over me</h1>
</div>

The important line is transition: all 600ms ease-in-out; this means when something changes, transition to the change and take 600 milliseconds to do it.

I hope this helps.

answered Nov 21 '17 at 13:59

Andrew Bone

7,092
2
18
33

Hi. I know how transitions work, I'd like to do it with keyframes, like I described and tagged it in this question... So this doesn't help me. Anyway, thanls--- – webta.st.ic Nov 21 '17 at 15:06
https://stackoverflow.com/questions/16516793/how-to-reverse-an-animation-on-mouse-out-after-hover – Andrew Bone Nov 21 '17 at 15:10
Why is it preferred to use transitions for that instead of animation with keyframe? Doesn't both make use of the GPU in this senario? Animations are much easier to work when your element isnt mounted to the dom before you change some state like hover. To use transitions in such a case you would have to use requestAnimationFrame :/ – user3711421 Oct 09 '18 at 21:36

score 0 · Answer 2 · answered May 14 '20 at 06:03

Use this!

.slidedown{
  display: none;
  width: 100%;
  background: #000;
  color: #fff;
  height: 50%;
  animation: 1s slideDown;
}

@keyframes slideDown {
 0%{
   height: 0%;
 }
 100%{
   height: 50%;
 }
}

you can use , seperator to seperate your animation for example animation: 1s slideDown, 1s slideUp

Slide out animation with keyframes and display: none;

2 Answers2