How do I reuse keyframes to play an animation backwards?

Question

I have the following css:

    @keyframes expandTop {
      from {
        height: 0;
      }
      to {
        height: 100px;
      }
    }
    &.expand {
      animation: expandTop 0.5s ease-out forwards;
    }
    @keyframes collapseTop {
      from {
        height: 100px;
      }
      to {
        height: 0;
      }
    }
    &.collapse {
      animation: collapseTop 0.5s ease-out forwards;
    }
    &.still {
      animation: none;
    }
  }

This works but it feels like there should be a way to reuse the same @keyframes. I tried a bunch of combinations of reverse and backwards etc.. but to no avail. The animation is triggered by switching css class. I'd like something along those lines but that works:

    @keyframes top {
      from {
        height: 0;
      }
      to {
        height: 100px;
      }
    }
    &.expand {
      animation: top 0.5s ease-out forwards;
    }
    &.collapse {
      animation: top 0.5s ease-out reverse backwards;
    }
    &.still {
      animation: none;
    }

I've been banging my head on the docs but that's not helping... Am I screwed because I am using classes to trigger?

Temani Afif · Accepted Answer · 2025-03-10 21:34:35Z

3

This is a job for transition not for animation

function e() {
  document.getElementById('div').classList.toggle('collapse');
  document.getElementById('div').classList.toggle('expand');
}

.still {
  transition: height 1s;
  background: red;
}

.collapse {
  height: 0;
}

.expand {
  height: 100px;
}

<button onclick="e()">switch</button>

<div id="div" class="collapse still"></div>

answered Mar 10 at 21:34

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ere Männistö · Accepted Answer · 2025-03-10 18:20:16Z

1

You can reuse the same @keyframe animation for both expanding and collapsing by using animation-direction: reverse - no need for separate keyframes!

Just set the starting height correctly for collapse and let CSS handle the rest. The animation-fill-mode: forwards ensures the element stays in its final state after the animation completes.

The demo shows it in action (with JS), but the technique itself is pure CSS.

function expand() {
  const box = document.getElementById('demo');
  box.classList.remove('collapse');
  void box.offsetWidth;
  box.classList.add('expand');
}

function collapse() {
  const box = document.getElementById('demo');
  box.classList.remove('expand');
  void box.offsetWidth;
  box.classList.add('collapse');
}

.box {
  width: 100px;
  background: #3498db;
  overflow: hidden;
  height: 0;
}

@keyframes top {
  from {
    height: 0;
  }

  to {
    height: 100px;
  }
}

.expand {
  animation-name: top;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.collapse {
  /* Initial height needed for reverse animation */
  height: 100px;
  animation-name: top;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-direction: reverse;
}

<div>
  <button onclick="expand()">Expand</button>
  <button onclick="collapse()">Collapse</button>
</div>
<div id="demo" class="box"></div>

edited Mar 10 at 18:20

answered Mar 10 at 17:41

Ere Männistö

1,0741 gold badge6 silver badges27 bronze badges

2 Comments

Sergey A Kryukov Mar 10 at 17:55

Excuse me, this code snipped does not show anything. Did you test it in this page? As a minimum, you need HTML part as well.

Ere Männistö Mar 10 at 18:04

Sorry, was trying to move the javascript to the last, since it's not really the main part here, but the snippet won't allow that =)

Collectives™ on Stack Overflow

How do I reuse keyframes to play an animation backwards?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related