ПаветтаГенератор CSS-анимации
Собирает анимацию целиком: и правило keyframes, и короткую запись свойства animation — то и другое можно сразу вставить в стили. В наборе двадцать с лишним эффектов, разложенных по назначению: появление, привлечение внимания, исчезновение и непрерывное движение.
Предпросмотр
Эффект
Параметры
Готовый код
Keyframes, длительность и кривая
Анимация в CSS собирается из двух частей. Правило keyframes описывает, что происходит на каждом проценте пути, а свойство animation говорит, сколько это длится, с какой задержкой, сколько раз повторяется и по какой кривой ускорения идёт. Инструмент собирает обе части сразу: и правило, и короткую запись.
В наборе больше двадцати эффектов, разложенных по назначению: появление, привлечение внимания, исчезновение и непрерывное движение. Появление уместно для карточек при прокрутке, привлечение внимания — для кнопки, на которую надо посмотреть, непрерывное движение — для индикаторов загрузки.
Кривая ускорения важнее длительности. Линейная кривая читается механически, ease-out делает движение естественным: быстрый старт и мягкое торможение. Для интерфейсных переходов обычно берут 150–300 миллисекунд, дольше начинает раздражать, короче не успевает считаться глазом.
| Параметр | Что задаёт | Разумное значение |
|---|---|---|
| duration | Длительность | 200–300 мс |
| timing-function | Кривая ускорения | ease-out |
| delay | Задержка старта | 0–100 мс |
| iteration-count | Число повторов | 1 / infinite |
| fill-mode | Что остаётся после | forwards |
От праксиноскопа до отказа от Flash
Принципы, по которым движение выглядит живым, сформулировали аниматоры студии Диснея в тридцатые: Олли Джонстон и Фрэнк Томас позже собрали их в двенадцать правил. Среди них разгон и торможение — то, что в CSS называется timing-function. Без них движение читается как механическое.
В вебе анимацию долго делали через JavaScript и таймеры, а до того через анимированные GIF и Flash. Flash держал интерактивную графику веба почти десять лет, пока в 2010 году Стив Джобс не опубликовал письмо об отказе от него на мобильных устройствах. После этого вся анимация переехала в CSS и JavaScript.
Свойство animation вместе с keyframes появилось в WebKit в 2007 году и вошло в спецификацию CSS Animations, которая получила статус рекомендации в 2023-м. Задержка между реальным использованием и формальным статусом — обычное дело для CSS: браузеры обгоняют комитет на годы. Позже появился Web Animations API, который даёт управлять теми же анимациями из JavaScript: ставить на паузу, перематывать и менять скорость на ходу.
Что анимировать, чтобы не тормозило
Выберите эффект, задайте длительность и кривую и вставьте оба фрагмента кода: правило keyframes идёт отдельно, свойство animation — в стиль элемента. Значение forwards в fill-mode оставляет элемент в конечном состоянии, иначе он вернётся к исходному виду сразу после окончания.
Анимируйте transform и opacity — они не заставляют браузер пересчитывать раскладку, поэтому идут плавно даже на слабых устройствах. Анимация ширины, высоты или отступов вызывает пересчёт на каждом кадре и на длинных страницах заметно тормозит. И добавьте правило prefers-reduced-motion: часть людей отключает анимацию в системе, и это стоит уважать. Функции движения соберёт генератор transform. Ступенчатая кривая steps даёт покадровое движение: спрайтовая анимация из полоски кадров собирается одним правилом с шагом по числу кадров. Так делают мигающий курсор и старые пиксельные эффекты. Свойство animation-play-state ставит анимацию на паузу прямо из CSS: индикатор загрузки можно остановить по наведению курсора, не трогая скрипты.
Держите набор эффектов коротким. Три-четыре типа движения на весь сайт создают ощущение целостности, десяток разных превращает страницу в ярмарку. Хорошая привычка — вынести длительность и кривые в переменные CSS и дальше пользоваться только ими.
| Части записи | keyframes + animation |
| Интерфейсный переход | 150–300 мс |
| Естественная кривая | ease-out |
| Бесконечный повтор | infinite |
| Остаться в конце | fill-mode: forwards |
| Дешёвые свойства | transform, opacity |
| Появление в WebKit | 2007 |
| Уважать настройку | prefers-reduced-motion |
Как пользоваться
Длительность, задержка, число повторов, направление и функция сглаживания настраиваются рядом, а предпросмотр перезапускается на каждое изменение, поэтому эффект видно сразу. Отдельно можно собрать свою кривую сглаживания через cubic-bezier и посмотреть, как она меняет характер движения.
- Появление, внимание, исчезновение или бесконечное движение. Предпросмотр запускается сразу.
- Длительность, задержку и число повторов. Для появления обычно хватает 300–500 мс.
- Готовые кривые или своя через cubic-bezier: она задаёт характер движения сильнее длительности.
- Под предпросмотром лежит и правило keyframes, и свойство animation.
Частые вопросы
Чем анимация отличается от перехода
Переход срабатывает на изменение свойства и идёт от старого значения к новому. Анимация не ждёт события: она запускается сама, знает промежуточные кадры и умеет повторяться. Переход подходит для наведения и раскрытия, анимация — для появления при загрузке и для бесконечного движения.
Что можно анимировать без потери плавности
transform и opacity: браузер отдаёт их видеокарте и не пересчитывает разметку. Всё, что меняет размеры и положение в потоке — width, height, top, margin, — заставляет пересчитывать страницу на каждом кадре, и на телефоне это видно сразу. Поэтому сдвиг делают через translate; свойство left для этого не годится.
Что означает функция сглаживания
Она задаёт, как распределяется движение во времени. linear — равномерно, ease-out — быстро в начале и мягко к концу, ease-in — наоборот. Для появления берут ease-out: объект влетает и мягко тормозит. Для исчезновения ease-in: сначала медленно, потом быстро уходит.
Как читать cubic-bezier
Четыре числа — это координаты двух контрольных точек кривой: X отвечает за время, Y за прогресс. Значения Y за пределами от нуля до единицы дают отскок и перелёт: движение проскакивает конечную точку и возвращается. Именно так делают пружинку без библиотек.
Почему анимация дёргается на телефоне
Три обычные причины: анимируется свойство, вызывающее пересчёт разметки; на элементе висит тяжёлый фильтр или большая тень; кадров слишком много. Проверять надо в панели производительности браузера — она показывает, сколько времени уходит на разметку и отрисовку каждого кадра.
Как быть с теми, кому анимация мешает
Уважать системную настройку. Медиазапрос prefers-reduced-motion сообщает, что человек просил уменьшить движение, и в этом случае анимацию либо отключают, либо заменяют простым проявлением. Для части людей резкое движение на экране вызывает тошноту и головокружение, это не вопрос вкуса.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
Сдвиг, поворот, масштаб и наклон, включая трёхмерные повороты с перспективой. С точкой отсчёта и разбором чужого значения.
ОткрытьГенератор text-shadowТень текста со слоями и готовыми эффектами: обводка, неон, объём, гравировка. Предпросмотр на своём фоне и шрифте.
ОткрытьГенератор FlexboxВизуальный конструктор flex-раскладки: направление, перенос, выравнивание по обеим осям. Отдельно настраиваются grow, shrink, basis и order каждого элемента.
ОткрытьГенератор clip-pathОбрезка блока по фигуре: многоугольник с перетаскиванием точек, круг, эллипс и рамка. Скосы, шестиугольники и звёзды из пресетов.
ОткрытьГенератор CSS filterРазмытие, яркость, контраст, насыщенность, оттенок, сепия и тень по контуру. Предпросмотр на своей картинке, файл остаётся в браузере.
ОткрытьКалькулятор CSS clamp()Адаптивный размер по двум точкам без медиазапросов. С графиком роста и проверкой требования доступности о масштабировании.
ОткрытьЕщё генераторы
Пароли и тестовые данные, CSS-градиенты, тени и скругления, clip-path и фильтры, анимации, Flexbox и Grid — в разделе 39 генераторов.