Урок 31 · CSS

Анимация объясняет, что блок новый

Блок, который только что открылся, легче заметить, если он появляется, а не оказывается на месте мгновенно.

Почему это следующий шаг

Карточки уже перестраиваются сами. Появление нужно для меню, подсказки и ответа, который только что раскрылся.

Как сделать

Начни с opacity: 0 и сдвига на несколько пикселей, закончи видимым состоянием. Длительность 150–250 мс достаточна. Анимируй opacity и transform, а не height и margin: они заставляют браузер пересчитывать всю страницу. У @keyframes оставь понятные имена from и to.

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.notice { animation: rise 0.2s ease; }

Что проверить

• Появление короче половины секунды.
• Блок не дёргает соседей во время анимации.
• Без поддержки анимации текст всё равно читается.