Локализованное руководство по чтению

web-animation-designНазначение, использование и источник

Разрабатывайте и внедряйте веб-анимации, которые выглядят естественно и целенаправленно. Используйте этот навык в первую очередь, когда пользователь задает вопросы об анимации, движении, сглаживании, тайминге, длительности, пружинах, переходах или производительности анимации. Это включает вопросы о том, как анимировать конкретные элементы пользовательского интерфейса, какое сглаживание использовать, лучшие практики анимации или вопросы доступности движения. Триггеры: сглаживание, сглаживание-отпускание, сглаживание-входа, сглаживание-входа-отпускания, кубическая кривая Безье, отскок, физика пружин, ключевые кадры, трансформация, прозрачность, затухание, скольжение, масштабирование, эффекты наведения, микроинтеракции, Framer Motion, React Spring, GSAP, CSS-переходы.entrance/exitанимация, переходы между страницами, смещение, изменение, ускорение GPU, предпочитает уменьшенное движение,modal/dropdown/tooltip/popover/drawerАнимация, анимация жестов, взаимодействие перетаскиванием, ощущение нажатия кнопок, ощущение неуклюжести, сделайте это плавно.

Источник получен: 2026-10-29

Репозиторий-источник: vercel-labs/open-agents
SKILL.md: .agents/skills/web-animation-design/SKILL.md
Звёзды репозитория: 5,871
Последнее обновление репозитория: 2026-08-29
Категории Skills: Рабочий процесс агента
Время последнего сбора: 2026-10-31 10:38 UTC+08:00

Лицензия: MIT

Оригинальный файл SKILL.md

Приведенные фрагменты описания рабочих процессов являются вспомогательными средствами для чтения, а не исполняемыми инструкциями от Codez. Для создания этой страницы не использовались сторонние инструменты.

Приведённые ниже фрагменты, описывающие цели и рабочие процессы, представляют собой исходный материал, систематизированный и переведённый для удобства чтения. Они отличаются от отдельно обозначенного редакционного анализа Codez.

Что делает этот навык

Как работает рабочий процесс на вышестоящем уровне

Быстрый старт

Каждое решение, касающееся анимации, начинается с этих вопросов: этот элемент входит или выходит? → Использоватьease-outДвижется ли какой-либо элемент на экране? → Использоватьease-in-outЭто что?hover/colorпереход? → Использоватьease

проход вверх по течению · L42 ↗

Когда анимировать

Enter/exitПереходы для обеспечения пространственной согласованности. Изменения состояний, которые выигрывают от визуальной непрерывности. Реакции на действия пользователя (обратная связь). Редко используемые взаимодействия, где удовольствие приносит дополнительную ценность.

проход вверх по течению · L144 ↗

Когда использовать пружины?

Взаимодействие с помощью перетаскивания с учетом инерции. Элементы, которые должны ощущаться «живыми» (динамический остров). Жесты, которые можно прервать в середине анимации. Органичные, игривые интерфейсы.

проход вверх по течению · L169 ↗

проход вверх по течению · ↗

Before: transform: scale(0)
After: transform: scale(0.95)
────────────────────────────
Before: 400ms duration
After: 200ms

Требования и настройка

Из этого файла не был выбран фрагмент с краткими требованиями. Это не означает, что у навыка нет зависимостей. Проверьте инструкции по настройке репозитория и указанные файлы.

Ограничения и проверки качества

постепенный вход (почти никогда)

Избегайте использования этого инструмента для анимации пользовательского интерфейса. Он делает интерфейс медленным, поскольку медленный запуск задерживает визуальную обратную связь.

проход вверх по течению · L100 ↗

Начните с безопасного пробного периода.

Проверьте поддерживаемый хост и инструкции по установке репозитория. Храните каталог Skill, а также связанные с ним скрипты, ресурсы и документацию вместе;SKILL.mdВ одиночку можно опустить зависимости.
Предоставьте агенту ваши реальные входные данные, желаемый результат и критерии приемки. Синтаксис вызова и доступные инструменты зависят от хоста; данный сайт не предполагает универсальной команды установки.
Попробуйте запустить исходный рабочий процесс в тестовом проекте или в его копии. Перед тем как разрешить операции, изменяющие файлы, удаленные сервисы или оплачиваемые ресурсы, проверьте их.
Проверьте выходные данные на соответствие исходным проверкам качества и вашим собственным требованиям. Успешный запуск или большое количество звезд в репозитории не гарантируют корректного результата.

Формат навыков и спецификация каталога ↗

Подробнее читайте в источнике.

Перевод и сфера применения

В этом руководстве по чтению представлены избранные отрывки из закрепленного текста выше по течению.SKILL.mdПеревод выполнен с помощью переводчика. Это не полное руководство и не гарантия проверенной совместимости. Перед использованием ознакомьтесь с оригиналом и указанными в нем файлами.

Данное введение относится к закрепленной ниже версии; текущая активность в репозитории и время сбора данных отображаются отдельно.

Закрепленный источник: Прочитайте оригинал ↗
Источник получен: 2026-10-29T09:32:23Z
Исходный коммит: cf865e94de7729751c747171785b6ce57e7b178c
Исходный SHA-256: dfcfd66edc4b09e22416c8be59160fd15259965e5f6f1cfa098858d7b23d4332

Вернуться к полному каталогу навыков