Переходы CSS: странная нежелательная задержка в браузерах Webkit (Chrome и Safari)

user3360686 прав, ваши переходы как-то сложены. Я не уверен, почему это происходит так, как не должно.

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

header * {
  transition: all 0.8s;
  -moz-transition: all 0.8s; 
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;

  transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
}

У вас в шапке около 25 элементов, к каждому из них будут применены переходы и задержки. Используйте определенные элементы для большей эффективности (и элегантности).

Использование «всех» с переходом, как правило, плохая идея, это хорошее средство для создания конфликтов. Используйте определенные свойства.

Этот быстрый и хороший ответ суммирует почти все: CSS3 , Порядок перехода на WebKit? Как поставить очередь на переходы?

Проблема вызвана многоуровневыми переходами для элементов, которые наследуют свойство transition.

a, span {
  transition: 0.5s;
}

a {
  padding: 0.5em 0.75em;
  border: 1px solid red;
  color: #000;
  display: inline-block;
}

a:hover{
  color: #f00;
  background-color: #0f0;
}

<a>
  <span>Text Content</span>
</a>

The section of css a, span applies the transition to both elements. The span inherits the color from the a, but does not apply the animation color until the a has finished its animation.

Лучшим решением для приведенного выше примера было бы удалить правило для a, span и поместить transition: 0.5s; в правило для a:

a {
  transition: 0.5s;
  padding: 0.5em 0.75em;
  border: 1px solid red;
  color: #000;
  display: inline-block;
}

a:hover{
  color: #f00;
  background-color: #0f0;
}

<a>
   <span>Text Content</span>
</a>

Я столкнулся с той же проблемой. Моя проблема заключалась в том, что я пытался передать свойства, которые изначально были унаследованы от родителя. Оказывается, браузеры Webkit (не Firefox) требуют, чтобы каждое свойство, к которому вы переходите, действительно применялось к этому элементу. Кажется, они не могут передавать свойства, которые были унаследованы.

Например, я пытался сделать это:

HTML

<div class="parent">
    <div class="child"></div>
</div>

CSS

.parent {
    color: #000;
}

.child {
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
    border-top: 10px #000 solid;
 }

.child.active {
    border-color: #ff0000;
    color: #ff0000;
}

Firefox удалось это сделать, но это требовалось и для Chrome, и для Safari:

.child {
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
    border-top: 10px #000 solid;
    // even though the color property is inherited,
    // webkit requires it for transitions
    color: #000;
 }

Другая причина нежелательных задержек связана с overflow: hidden;. Например, если у вас есть раскрывающаяся панель навигации с переключателем: когда она открыта, а max-height установлено на 1000px, а также имеет свойство CSS overflow: hidden;, переход от max-height к закрытому займет больше времени.