Ответ 1

Отрицательный transition-delay фактически полностью действителен и имеет другое значение, что 0s и не совпадает с положительной задержкой.

Выдержка из Рабочий проект W3C для задержки перехода:

Если значение для transition-delay является отрицательным смещением по времени, переход будет выполняться в момент изменения свойства, но, похоже, начнет выполнение с указанным смещением. То есть переход, по-видимому, начнется частично через его игровой цикл. В случае, когда переход подразумевает начальные значения и отрицательный transition-delay, начальные значения берутся с момента изменения свойства.

В результате первая часть анимации будет пропущена. В принципе, время начала сдвигается, изменяя вычисленную точку анимации.

Итак, если анимация продолжительности 10s имеет задержку -5s, она, похоже, начнет движение на полпути (пропустив первую половину) и завершив только 5s. Вот простой пример, чтобы показать этот эффект в действии.

Иллюстративный пример:

function toggle() {
  var left = document.querySelector('.left');
  var right = document.querySelector('.right');
  left.classList.toggle('hidden');
  right.classList.toggle('hidden');
  left.classList.toggle('show');
  right.classList.toggle('show');
}
window.setInterval(toggle, 15000);
window.setTimeout(toggle, 100);

#container {
  background: yellow;
  display: flex;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.left,
.right {
  flex: 1;
}
.left {
  background: red;
  transition: transform 10s linear;
  transition-delay: -5s;
}
.right {
  background: blue;
  transition: transform 10s linear;
  transition-delay: 0s;
}
.hidden {
  transform: translateY(100%);
}
.show {
  transform: translateY(0%);
}
.container-hide {
  transform: translateY(-100%);
}

<div id="container">
  <div class="left hidden"></div>
  <div class="right hidden"></div>
</div>

Ответ 2

Q: Может ли кто-нибудь объяснить мне, что делает отрицательное значение transition-delay?

В документация MDN для transition-delay:

Отрицательные значения заставляют переход начать немедленно, но для того, чтобы переход, казалось, начинался частично через эффект анимации.

Это также описано в W3C Working Draft для свойства, как упоминалось Alexander Ответ "Мара" :

Если значение transition-delay является отрицательным смещением по времени, тогда переход будет выполняться в момент, когда свойство будет изменено, но, похоже, начнет выполнение с указанным смещением. То есть переход, по-видимому, начнется частично через его игровой цикл. В случае, когда переход подразумевает начальные значения и отрицательную задержку перехода, начальные значения берутся с момента изменения свойства.

Это означает, что переход начнется немедленно и частично, как будто указанное время уже прошло. Например, рассмотрим это (открытый фрагмент):

#box1 {
  width: 200px;
  height: 50px;
  
  transition: width 3s 1s;
    
  background-color: green;
}

#box2 {
  width: 200px;
  height: 50px;
  
  transition: width 3s 0s;
    
  background-color: red;
}

#box3 {
  width: 200px;
  height: 50px;
  
  transition: width 3s -1s;
    
  background-color: blue;
}


#box1:hover, #box2:hover, #box3:hover {
  width: 400px;
}

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

<ul>
  <li>Box 1 (green) has transition delay of 1s.</li>
  <li>Box 2 (red) has transition delay of 0s.</li>
  <li>Box 3 (blue) has transition delay of -1s.</li>
<ul>  

Ответ 3

Отрицательный переход будет вычитаться из времени перехода, но он не пройдет 0.