Animista: 40 CSS-анимаций с настройками и готовым кодом
Пробуйте 40 оригинальных CSS-анимаций Animista прямо на странице: перевороты, появления, текст и фоны. Настраивайте время и направление, сравнивайте эффекты и скачивайте готовый CSS.
Выбирать анимацию по названию неудобно: «появление», «поворот» и «отскок» почти ничего не говорят о том, как будет двигаться конкретная карточка. Поэтому здесь не только обзор, но и мастерская: 40 эффектов, параметры воспроизведения, покадровый просмотр и готовый код для своего проекта.
Animista позволяет просматривать CSS-анимации, менять параметры и забирать выбранный CSS. Официальный сценарий работы включает настройку эффекта, добавление в избранное и получение кода через экран загрузки: это описано в инструкции сервиса.
Что можно попробовать прямо здесь
В подборке шесть групп: 8 базовых преобразований, 10 появлений, 6 исчезновений, 6 акцентных движений, 6 текстовых эффектов и 4 анимации фона. В каждом примере используется оригинальный набор keyframes Animista; элементы демонстрации, настройки, выгрузка кода и оформление мастерской сделаны для этого сайта.
Не скриншот и не видеозапись. Движение выполняет браузер с помощью CSS. Можно поменять длительность, задержку, направление, количество повторов и fill-mode, поставить воспроизведение на паузу или перейти к конкретному кадру.
Анимации не запускаются сами. Это особенно важно для длинной страницы с большим количеством примеров: вы решаете, что и когда смотреть.
- Для карточек и интерфейса: перевороты, вращения, масштабирование, появления и исчезновения.
- Для типографики: изменение расстояния между буквами, фокус и тень.
- Для декоративных элементов: мягкие акценты, смена цветов и движение градиента.
- Для сравнения: отдельный стенд с тремя кривыми скорости и практический пример очереди карточек.
Мастерская: 40 живых CSS-анимаций
Сначала выбран flip-diagonal-2-fwd из ссылки на Animista. Нажмите «Запустить заново», затем попробуйте reverse или два повтора с alternate. На двусторонней карточке легче увидеть сам переворот, чем на одноцветном прямоугольнике.
Каталог можно отфильтровать по группе или найти эффект по русскому названию и CSS-имени. Выбор нового эффекта возвращает параметры к исходным значениям мастерской и подбирает подходящий объект; изменение параметров останавливает движение, чтобы его можно было запустить заново осознанно.
Как параметры меняют движение
Длительность, задержка, направление, число повторов и fill-mode входят в модель CSS Animation. Их точное поведение описано в справочнике MDN; таблица ниже помогает выбрать, что проверить в мастерской.
| Параметр | Что меняется | Эксперимент |
|---|---|---|
duration |
Длительность одного цикла. | Сравните 0,4 и 2 секунды на одном перевороте. |
delay |
Ожидание перед началом. | Добавьте 1 секунду и сравните none с backwards. |
timing-function |
Распределение скорости внутри движения. | Сравните linear, ease-in-out и steps. |
direction |
Обычное, обратное или чередующееся направление. | Выберите 2 повтора и alternate. |
iteration-count |
Число циклов, включая infinite. |
Посмотрите один цикл и повторяющийся акцент. |
fill-mode |
Применение кадров до начала и после конца. | На fade-out сравните none и forwards. |
Значения и смысл параметров в таблице соответствуют CSS animation на MDN. Ползунок позиции в нашей мастерской показывает весь конечный запуск вместе с задержкой, а для бесконечного повтора позволяет рассмотреть один цикл.
Исчезнувший объект не обязательно означает ошибку. У эффекта исчезновения с forwards или both последний кадр может сохранять нулевую прозрачность. Это ожидаемое поведение fill-mode, а «Сброс» в мастерской вернёт объект в исходное видимое состояние: подробнее о сохранении кадров в MDN.
Сравнение: одинаковое время, разная скорость
Этот стенд запускает три одинаковых вращения одновременно. Отличается только кривая: равномерная linear, стандартная ease и ease-in-out с плавным началом и окончанием; назначение timing-function описано в документации CSS animation.
Начните с двух секунд. Следите не только за конечным положением, но и за тем, где каждый объект оказывается в середине движения: именно это помогает выбрать характер перехода для интерфейса.
Практический пример: карточки по очереди
Не обязательно подбирать отдельный эффект для каждого элемента. В этом примере четыре карточки используют один fade-in-bottom; меняются только задержки. Сравните одновременное появление, обычную очередь и обратный порядок.
Значение интервала видно на каждой карточке и в CSS под стендом. Это учебный пример организации перехода: он не отправляет запросы и не имитирует загрузку реальных данных.
В проекте я рекомендую сохранять содержимое доступным и без анимации: не связывать получение данных с декоративным эффектом и не скрывать важные действия на время длинной очереди. Сначала проверьте обычную скорость, затем намеренно замедлите движение и посмотрите, остаётся ли интерфейс удобным.
Как перенести эффект на свой сайт
В основной мастерской откройте «CSS и HTML для вашего проекта». Кнопка «Скачать CSS» отдаёт только выбранные keyframes вместе со стилями демонстрационного объекта, текущими настройками, лицензией и защитой для reduced motion. HTML копируется отдельно; если браузер запрещает буфер обмена, появится поле для ручного копирования.
- Настройте один эффект. Убедитесь, что длительность, повторы и конечный кадр подходят вашему сценарию.
- Сохраните CSS. Подключите его в собственном проекте или перенесите нужные правила в существующий файл стилей.
- Добавьте HTML. Для теста используйте разметку из мастерской; затем замените содержимое своим.
- Выберите момент запуска. В экспортированном примере анимация назначена сразу. В рабочем интерфейсе можно применять класс после действия пользователя; сама CSS-анимация не требует кода нашего редактора.
- Проверьте контекст. Посмотрите результат на узком экране, с длинной надписью и при уменьшенном движении.
Для исходной Animista получение кода устроено через её собственный экран загрузки; там также есть опции минификации и Autoprefixer. Это возможности оригинального сервиса, а не кнопки нашей мастерской: см. официальную инструкцию.
3D-перевороту нужен контекст. В нашей демонстрации есть перспектива, две стороны карточки и стили их обратной видимости. Они входят в выгружаемый пример: если забрать только keyframes и применить их к другому элементу, внешний вид закономерно будет отличаться.
Большие входящие смещения ограничены сценой предпросмотра. Поэтому элемент может часть времени находиться за её границей; увеличьте длительность или используйте ползунок позиции, чтобы рассмотреть движение.
Движение, доступность и спокойный интерфейс
Настройка prefers-reduced-motion сообщает странице о желании пользователя уменьшить необязательные движения. Особенно чувствительными могут быть масштабирование и перемещение крупных объектов; это поясняет MDN.
В этой мастерской нет автоматического старта. Если система просит уменьшить движение, запуск заблокирован до отдельного разрешения внутри конкретного стенда; код при этом остаётся доступен. Экспортированный CSS по умолчанию отключает анимацию в таком режиме и оставляет объект видимым.
@media (prefers-reduced-motion: reduce) {
.demo-object {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}Для рабочего сайта я рекомендую применять движение там, где оно объясняет изменение состояния: появление карточки, подтверждение действия, раскрытие блока. Бесконечные акценты лучше оставлять редкими и давать возможность остановить их; CSS animation позволяет управлять состоянием воспроизведения, а рекомендации по доступности приведены в MDN.
Лицензия, оригинал и границы мастерской
Анимации, сгенерированные Animista, доступны для личного и коммерческого использования по FreeBSD License. Авторское уведомление © 2017 Ana Travas, условия распространения и отказ от гарантий нужно сохранять; полный текст опубликован на странице лицензии Animista.
В наши CSS-выгрузки включён полный текст этой лицензии. Keyframes взяты из официального CSS Animista, а интерфейс мастерской, демонстрационные объекты и учебные сценарии созданы отдельно для ae-nekrasov.ru.
Это подборка из 40 эффектов, а не полный каталог и не официальный встроенный интерфейс сервиса. За другими вариантами и оригинальным рабочим процессом можно перейти в Animista; для выбора эффекта из этой статьи уходить со страницы не нужно.
