Переходы и анимации могут использоваться не только для украшения. Они также могут подсказывать, что происходит на веб-странице. Если элемент пункта списка вставляется в элемент списка, то вместо того, чтобы он просто внезапно появился, можно использовать анимацию, сдвигающую список для освобождения места для нового пункта списка, которая сделает происходящее предельно понятным. Без нее очень легко пропустить появление нового пункта списка.

Конечно, есть много ситуаций, в которых в подобной анимации нет необходимости. Но вот интересные примеры, которые можно использовать в подходящей ситуации:

Ничего особого, но, надеемся, вам пригодятся эти идеи.

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

У ключевых кадров есть только значения последнего кадра, к которому следует анимация. Когда не указано значение, от которого начинается анимация, или 0%, то анимация начинается с текущих значений. Высота, прозрачность и масштаб используется здесь, чтобы элемент пункта списка оказался на месте:

.new-item {
  max-height: 0;
  opacity: 0;
  transform: scale(0);
  animation: growHeight 0.2s ease forwards;
}
@keyframes growHeight {
  to {
    max-height: 50px;
    opacity: 1;
    transform: scale(1);
  }
}

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

.new-item {
  max-height: 0;
  opacity: 0;
  transform: translateX(-300px);
  animation:
    openSpace 0.2s ease forwards,
    moveIn 0.3s ease 0.2s forwards;
}
@keyframes openSpace {
  to {
    max-height: 50px;
  }
}
@keyframes moveIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

У второй анимации есть второе значение времени, это значение задержки. Оно равняется продолжительности первой анимации. Так что анимации запускаются последовательно.

В примере с просмотром дополнительной информации элемент пункта списка увеличивается в размере с помощью трансформации масштаба по оси X. Список спрятан за ним также с помощью трансформаций. Т.е., элемент списка становится намного меньше и прячется за развернутым элементом пункта списка, который с помощью трансформаций увеличился во много раз.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:

• Создание исчезающего с задержкой атрибута заглушки
• Интересное оформление для элемента цитаты с использованием CSS
• Создание необычного разворачивающегося поля ввода текста