Css alternative to slide down using transform: scale

Question

SlideDown type of animations are very useful to show the user what is changing in the layout. I used to do this with JQuery, but I rather have a CSS only solution.

If the element is positioned absolute, everything is perfect with using transform: scale. But it is possible to do the same when the element is taking space and should move things around?

I don't mind that it grabs it's space in one big step - as long as the animation shows some kind of direction for the eye to follow.

There is the work around with max-height - like here: https://stackoverflow.com/a/8331169/647845 , but what I don't like is that I have to estimate the height, otherwise the animation looks clunky or you're missing content.

I'm perfectly fine for using transform: scale and having a jump in the other elements. In combination with display: block it does not work though. I'm looking for animating both up and down.

Is there a (simple) alternative?

In conclusion I'm looking for an alternative to animating the delay of display: none/block.

.lolcat
{
    transition: transform 200ms ease-in-out;
    transform: scale(1,0);
    transform-origin: 0 0;
    display: none;
}

.lolcat.expanded
{
    transform: scale(1,1);
    display: block; /* I wish you'd be delayable */
}

`display` isn’t an animatable property; if you want to keep using that, you’ll have to involve JavaScript, subscribing to animationend events, and switch the display value _after_ the animation has run. `visibility` however is animatable. — misorude, Nov 27 '18 at 09:15
But `visibility` will take space as its somewhat similar to `opacity: 0` — Abhishek Kumar, Nov 27 '18 at 09:18
Hi @misorude, I know - that is why I'm asking this question - what are the CSS alternatives? — Dirk Boer, Nov 27 '18 at 09:59

score 0 · Answer 1 · answered Nov 28 '18 at 15:30

You can use margin-top property and animate menu.

See the Snippet below:

#lolcat-container{
  overflow:hidden;
}

.lolcat
{
    border:1px solid black;
    background:red;
    color:white;
    margin-top:-100%;
    animation-direction: reverse;
    animation:1s 1 alternate forwards close;
}

#menu:hover .lolcat
{
    animation:1s 1 alternate forwards open;
}

@keyframes open {
  0% {
    margin-top:-100%;
  }
  100% {
    margin-top:0%;
  }
}

@keyframes close {
  0% {
    margin-top:0%;
  }
  100% {
    margin-top:-100%;
  }
}

<div id="menu">
    <a>hover me</a>
    <div id="lolcat-container">
      <ul class="lolcat">
          <!-- Create a bunch, or not a bunch, of li's to see the timing. -->
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
          <li>item</li>
      </ul>
    </div>
    <div>
      Content
    </div>
</div>

You can also test it here

Css alternative to slide down using transform: scale

1 Answers1