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 към затворено.