CSS наконец-то позволяет анимировать элементы прямо в момент их первого появления.

Для этого появился @starting-style, который уже поддерживается примерно у 90% пользователей.

Раньше переходы не срабатывали при первом применении стилей к элементу, поэтому приходилось городить обходные решения на JavaScript.

Теперь начальное состояние можно задать прямо в CSS.

.card {
  opacity: 1;
  transform: translateY(0);
  transition: 0.3s;
}

@starting-style {
  .card {
    opacity: 0;
    transform: translateY(20px);
  }
}

Элемент сразу появляется с нормальной анимацией, без дополнительного JavaScript.

Мелочь, которую CSS должен был уметь уже очень давно.