You can transition z-index

You can animate z-index. That sounds a little odd because there is nothing visual between one stacking level and the next, but it can still be useful when an element changes size or position at the same time.

Here is the smallest version:

@keyframes move {
  from {
    z-index: 0;
    transform: scale(1);
  }

  to {
    z-index: 4;
    transform: scale(2.5);
  }
}

The scale changes smoothly. z-index, however, is an integer, so the browser moves through whole stacking values rather than blending between them.

That distinction matters. Use the animation when changing the stacking order at a particular point helps the rest of the effect. Do not expect z-index itself to look animated—it is doing useful work behind the scenes.

← Back to all articles