Уменьшение высоты элементов в анимации CSS происходит с небольшой задержкой. Почему?

По умолчанию анимации CSS запускаются сразу после загрузки страницы, однако их можно отложить с помощью свойства animation-delay. При запуске приведенного ниже фрагмента прямоугольник не сжимается по вертикали, пока не пройдет несколько секунд.

Почему это выглядит так «ждет» и как я могу это исправить?

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INITIAL /////////////////////////////// */

html,
body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  font-family: sans-serif;
}

p {
  overflow: hidden;
  max-height: 100rem;
  width: 10rem;
  margin: auto;
  padding: 4rem 1rem;
  background-color: #f8f8f8;
  color: #222;
  text-align: center;
}

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ANIMATIONS ///////////////////////////// */

.contract-ht {
  animation-name: contract-height;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes contract-height {
  100% {
    max-height: 0;
  }
}
<p class="contract-ht">shrink me vertically</p>

РЕДАКТИРОВАТЬ: я добавил фрагмент с преобразованием масштаба рядом с анимацией высоты, чтобы рядом можно было увидеть, что анимация высоты начинается значительно медленнее, чем анимация scale. Крайняя левая анимация почти начинается, когда заканчивается правая. Я хочу, чтобы левые начали заметно уменьшаться одновременно с правыми. Они оба имеют одинаковую продолжительность, почему анимация на основе max-height задерживается, когда я не использую animation-delay?

Фрагмент ниже

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INITIAL /////////////////////////////// */

html,
body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  font-family: sans-serif;
}

p {
  overflow: hidden;
  max-height: 100rem;
  width: 10rem;
  margin: auto;
  padding: 4rem 1rem;
  background-color: #f8f8f8;
  color: #222;
  text-align: center;
}

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ANIMATIONS ///////////////////////////// */

.contract-ht {
  animation-name: contract-height;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes contract-height {
  100% {
    max-height: 0;
  }
}

/* added these two css rules below */
.scale-ht {
  animation-name: scale-height;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes scale-height {
  100% {
    transform: scaleY( 0 );
  }
}
<p class="contract-ht">shrink me vertically</p>

<!-- added the element below -->
<p class="scale-ht">scale my height</p>


animation html css height dimension
person savant    schedule 13.06.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку вы указали animation-duration: 2s;, потребуется 2 секунды, чтобы завершить 100% переход. Просто уменьшите его, как показано ниже, чтобы уменьшить задержку. если вы удалите продолжительность перехода, он покажет немедленный результат

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INITIAL /////////////////////////////// */

html,
body {
  height: 100%;
}

body {
  display: flex;
  margin: 0;
  font-family: sans-serif;
}

p {
  overflow: hidden;
  max-height: 100rem;
  width: 10rem;
  margin: auto;
  padding: 4rem 1rem;
  background-color: #f8f8f8;
  color: #222;
  text-align: center;
}

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ANIMATIONS ///////////////////////////// */

.contract-ht {
  animation-name: contract-height;
  animation-fill-mode: forwards;
}

@keyframes contract-height {
  100% {
    max-height: 0;
  }
}
<p class="contract-ht">shrink me vertically</p>

person jafarbtech    schedule 13.06.2017
comment
Ваш фрагмент все еще зависает на секунду, прежде чем вы видите, что он движется. Мой вопрос в том, почему высота ведет себя таким образом, но если бы я изменил цвет или непрозрачность, анимация началась бы, как только загрузился браузер. Это может иметь какое-то отношение к прокладке. Хотели бы вы, чтобы я привел пример обычной анимации рядом с ним? - person savant; 13.06.2017
comment
см. фрагмент сейчас. он не будет висеть. Я также обновил причину - person jafarbtech; 13.06.2017
comment
Ваш текущий пример, похоже, вообще не движется. Пожалуйста, посмотрите мой обновленный вопрос, хотя я привел параллельный пример того, о чем я говорю, и последняя анимация определенно начинается намного раньше, чем height. - person savant; 13.06.2017