transition-delay property not working when changing class

Question

I'm animating an element by changing its parent class (body), but when toggling this class it seems to break the transition-delay property. It works in Safari but not in Chrome or Firefox.

On clicking the first list element, it should move after the other list elements have disappeared.

When clicking back, the list element should return back to its original position, and afterwards the other list element should reappear. But when clicking the back button, the transition-delay on opacity is ignored, causing them to immediately appear.

How can I fix this?

$('#one').click(function() {
  $("body").addClass("move");
});

$('#back').click(function() {
  $("body").removeClass("move");
});

ul {
  width: 300px;
  height: 150px;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  bottom: 0;
  right: 0;
}
ul li {
  height: 50px;
  display: block;
  margin: 0;
  padding: 0;
  background: lightgreen;
  transition: 500ms transform ease-in-out, 500ms opacity linear;
  opacity: 1;
  transition-delay: 0, 500ms;
}
body.move ul li#one {
  transform: translateY(-100vh) translateY(150px);
  transition: 500ms transform ease-in-out;
  transition-delay: 500ms;
  opacity: 1;
}
body.move ul li {
  opacity: 0;
  transition: 500ms opacity linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="one">One</li>
  <li id="two">Two</li>
  <li id="three">Three</li>
</ul>
<a id="back">Back</a>

https://jsfiddle.net/m3e7sm8k/5/

Michael Benjamin · Accepted Answer · 2016-10-25T15:48:36.923

Instead of this:

transition-delay: 0, 500ms;

Use this:

transition-delay: 0s, 500ms;

0, as a unitless time value, doesn't work in some browsers, apparently. The transition-delay definition in the spec doesn't explicitly prohibit a unitless value, but it does appear to be implied by the consistent use of 0s. In any case, I would avoid unitless time values to be safe.

Spec reference: 2.4. The transition-delay Property

transition-delay property not working when changing class

1 Answers1