Что не так с анимацией max-height

Question

Почему анимация max-height происходит быстрее, чем другие свойства? Как это решить?

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  overflow: hidden;
}

.anim__container {
  display: flex;
  flex-direction: column;
  color: white;
}

.anim__item__content {
  padding: 10px;
}

.anim__item:nth-of-type(1) {
  background-color: #ED6565;
}

.anim__item:nth-of-type(2) {
  background: linear-gradient(180deg, #CAED65 0%, #65EDB4 100%);
  max-height: 0px;
  overflow: hidden;
  animation: 40s animateHeight ease-in-out forwards;
}

.anim__item:nth-of-type(3) {
  background-color: #ED9E65;
}

@keyframes animateHeight {
  0% {
    max-height: 0px;
    transform: rotate(90deg);
  }
  100% {
    max-height: 100000px;
    transform: rotate(0deg);
  }
}

<div class="anim__container">
  <div class="anim__item">
    <div class="anim__item__content">
      123
    </div>
  </div>
  <div class="anim__item">
    <div class="anim__item__content">
      123
    </div>
  </div>
  <div class="anim__item">
    <div class="anim__item__content">
      123
    </div>
  </div>
</div>

Answer 1

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

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  overflow: hidden;
}

.anim__container {
  display: flex;
  flex-direction: column;
  color: white;
}

.anim__item__content {
  padding: 10px;
}

.anim__item:nth-of-type(1) {
  background-color: #ED6565;
}

.anim__item:nth-of-type(2) {
  background: linear-gradient(180deg, #CAED65 0%, #65EDB4 100%);
  max-height: 0px;
  overflow: hidden;
  animation: 3s animateHeight ease-in-out forwards, 2s animateRotate ease-in-out forwards;
}

.anim__item:nth-of-type(3) {
  background-color: #ED9E65;
}

@keyframes animateHeight {
  0% {
    max-height: 0px;
  }
  100% {
    max-height: 50px;
  }
}

@keyframes animateRotate {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

<div class="anim__container">
  <div class="anim__item">
    <div class="anim__item__content">
      123
    </div>
  </div>
  <div class="anim__item">
    <div class="anim__item__content">
      123
    </div>
  </div>
  <div class="anim__item">
    <div class="anim__item__content">
      123
    </div>
  </div>
</div>

Конкретно по вопросу о скорости выполнения: анимация пытается уложиться в заданное время, поэтому, чем большую высоту Вы зададите, тем быстрее будет скорость, так как нужно успеть пройти все итерации (кадры).

БЛОГ НА HUSL

Что не так с анимацией max-height

Ответы (1 шт):