CODEWITHSUNDEEP
htmlcsscss-animationskeyframe
webta.st.ic
webta.st.ic

Reputation: 5169

Slide out animation with keyframes and display: none;

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?

Upvotes: 1

Views: 3793

Answers (2)

faseeh
faseeh

Reputation: 131

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

Upvotes: 0

Andrew Bone
Andrew Bone

Reputation: 7291

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.

Upvotes: 3

Related Questions