animation: ключевые кадры и спокойная альтернатива движению
Свойство animation связывает элемент с ключевыми кадрами и задаёт параметры воспроизведения. Для короткого появления блока обычно достаточно одного прохода без бесконечного повторения.
Назначение
Свойство animation связывает элемент с ключевыми кадрами и задаёт параметры воспроизведения. Для короткого появления блока обычно достаточно одного прохода без бесконечного повторения.
Как это работает
Именованные кадры объявляют через @keyframes. Длительность и функцию времени задают на элементе. В примере меняется прозрачность: размеры и место блока остаются прежними, а режим уменьшения движения отключает эффект.
Пример
<style>@keyframes soft-appear{from{opacity:0}to{opacity:1}}.animated-note{padding:16px;background:#edf4ef;animation:soft-appear .5s ease-out both}@media(prefers-reduced-motion:reduce){.animated-note{animation:none}}</style>
<p class="animated-note">Сообщение доступно и без анимации.</p>Что должно получиться
При обычных настройках блок плавно появляется за половину секунды. При предпочитаемом уменьшении движения текст показывается сразу. После завершения он остаётся доступным и не требует повторного запуска.
Граница применения и частая ошибка
Не делайте завершение анимации единственным условием доступности кнопки или важного сообщения. Прозрачность не исключает элемент из порядка фокуса. Бесконечные и резкие эффекты требуют отдельного обоснования и управления.
Самостоятельная проверка
Повторно запустите пример, затем эмулируйте prefers-reduced-motion в браузере. Проверьте, что оба режима содержат одинаковый текст и анимация не сдвигает соседние элементы.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.