<!doctype html>
<title>Animating opacity, transform, filter, backdrop-filter should establish a stacking context.</title>
<link rel="help" href="https://drafts.csswg.org/web-animations-1/#side-effects-section">

<style>
.shouldStack {
  position: absolute;
  width: 150px;
  height: 50px;
  background-color: red;
}

.shouldNotStack {
  position: absolute;
  width: 150px;
  height: 50px;
  background-color: green;
}

.child {
  position: relative;
  top: 0px;
  left: 0px;
  width: 150px;
  height: 50px;
  background-color: green;
  z-index: -1;
}

.shouldNotStack .child {
  background-color: red;
}

#animatedOpacity {
  /* Use a large duration so animation is effectively invisible. */
  animation-duration: 100000s;
  animation-name: opacity_frames;

  top: 0px;
}

@keyframes opacity_frames {
  to {
    opacity: 0;
  }
}

#animatedTransform {
  animation-duration: 100000s;
  animation-name: transform_frames;

  top: 100px;
}

@keyframes transform_frames {
  to {
    transform: translateX(10px);
  }
}

#animatedFilter {
  animation-duration: 100000s;
  animation-name: filter_frames;

  top: 200px;
}

@keyframes filter_frames {
  to {
    filter: grayscale(50%);
  }
}

#animatedBackdrop {
  animation-duration: 100000s;
  animation-name: backdrop_frames;

  top: 300px;
}

@keyframes backdrop_frames {
  to {
    backdrop-filter: grayscale(50%);
  }
}

#animatedLeft {
  animation-duration: 100000s;
  animation-name: left_frames;

  top: 400px;
}

@keyframes left_frames {
  to {
    left: 10px;
  }
}
</style>

<div id="animatedOpacity" class="shouldStack">
  <div class="child">animated opacity</div>
</div>
<div id="animatedTransform" class="shouldStack">
  <div class="child">animated transform</div>
</div>
<div id="animatedFilter" class="shouldStack">
  <div class="child">animated filter</div>
</div>
<div id="animatedBackdrop" class="shouldStack">
  <div class="child">animated backdrop-filter</div>
</div>
<div id="animatedLeft" class="shouldNotStack">
  <div class="child">animated left</div>
</div>