HE
css-animations
Адаптер CSS-анимаций для HyperFrames: обеспечивает детерминированный поиск и превью ключевых кадров (data-start, data-duration). Подходит для декоративных эффектов (shimmer, glow, маски), но не для бесконечных анимаций или GSAP-хореографии.
Что делает навык
Адаптер для HyperFrames, обеспечивающий детерминированный поиск и превью CSS-анимаций ключевых кадров. Он позволяет синхронизировать локальное время анимации с клипом, используя атрибуты data-start и data-duration.
Когда применять
- Создание декоративных эффектов, таких как shimmer, glow или маски.
- Реализация простых повторяющихся мотивов и фонового движения.
- Добавление несеквенциальной анимации, принадлежащей одному элементу с фиксированной длительностью.
- Использование в средах без поддержки WAAPI, где требуется конечная длительность анимации.
Как работает
- Разместить анимируемый элемент в DOM до завершения инициализации runtime.
- Присвоить элементам атрибут data-start для соответствия локального времени анимации клипу.
- Установить конечные значения animation-duration и animation-iteration-count.
- Использовать animation-fill-mode: both для удержания состояний до и после активного движения.
- Избегать JavaScript, зависящего от часов, и переключений классов по событиям пользователя.
- Адаптер обнаруживает элементы с вычисленным animation-name и ищет их в браузере или использует отрицательную задержку.
Примеры запросов агенту
Создай эффект мерцания (shimmer) для карточки товара, используя CSS-анимацию HyperFrames.
Добавь анимацию свечения (glow) к кнопке, которая начинается через 2 секунды после старта клипа.
Реализуй фоновое движение для секции с использованием CSS keyframe анимации в HyperFrames.
Что понадобится
- HyperFrames runtime adapter (css)
- Поддержка CSS keyframe animations в браузере
- DOM-элементы с атрибутами data-start и data-duration
Описание составлено по SKILL.md навыка, сверено 05.10.2026.
Как подключить
1Скачать навык
# возьмите папку навыка «css-animations» из репозитория:
# https://github.com/heygen-com/hyperframes
2Положить папку с
SKILL.md к навыкам ассистента# положите папку навыка туда, где ассистент ищет skills:
cp -r css-animations/ ~/.claude/skills/css-animations/
Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.