Генератор CSS-анімації
Налаштуйте шаблони руху або ключові кадри та відтворіть анімацію для перевірки. Отримайте CSS для вебсторінки й приклад використання HTML.
Що можна робити
Налаштування руху за готовим варіантом
Виберіть один із 12 типів, зокрема появу, зникнення й обертання. Налаштуйте тривалість і повторення відповідно до потреб.
Редагування проміжних станів
Задайте переміщення, обертання, масштаб і прозорість для кожного ключового кадру та перевірте створений рух.
Отримання CSS і HTML
Копіюйте або зберігайте CSS-анімацію та приклад використання HTML із тим самим класом.
Як користуватися
Вибір шаблону
Виберіть потрібний рух і задайте тривалість одного відтворення. Вибір іншого шаблону також замінює всі змінені вами налаштування.
Змініть лише потрібні параметри
Відкрийте параметри відтворення або ключових кадрів, щоб змінити проміжний рух, напрямок, повторення та інші налаштування.
Створення та відтворення
Перевірте результат за допомогою «Створити CSS і попередній перегляд». Якщо зміните налаштування, створіть його ще раз.
Отримання CSS і HTML
Застосуйте CSS і додайте клас toollet-motion до HTML-елемента. Використовуйте приклад HTML разом із CSS.
Коли стане в пригоді
Створення анімації появи
Використовуйте шаблон появи або появи знизу, щоб налаштувати рух і швидкість появи.
Рух під час взаємодії з кнопкою
Змініть умову запуску на наведення або фокус клавіатури, щоб рух реагував на взаємодію.
Розуміння ключових кадрів і умов відтворення
Проміжні стани та тривалість
Відсоток ключового кадру — це його позиція в межах одного відтворення. Для анімації тривалістю 1 секунда позиція 50% відповідає 0,5 секунди. Функція плавності визначає зміну значень між ключовими кадрами.
Переміщення, обертання та вигляд
Горизонтальне/вертикальне положення — це величина переміщення від початкової позиції. Масштаб 1 відповідає початковому розміру; прозорість 0 означає повну прозорість, а 1 — непрозорість.
Затримка, повторення та напрямок
Затримка додається лише один раз перед початком відтворення. Для обмеженої кількості повторів загальний час дорівнює затримці + тривалості одного відтворення × кількість повторів. Чергування перемикає напрямок уперед і назад.
Стани до й після відтворення
Виберіть стан під час затримки та після завершення відтворення. Зворотний і почерговий режими змінюють, які позиції ключових кадрів використовуються на початку й наприкінці відтворення.
Налаштування зменшення руху
Створений CSS підтримує системне налаштування зменшення руху на пристрої. Анімація зупиняється та використовує кінцевий стан, визначений заданим напрямком і кількістю повторів. Для нескінченного відтворення використовується кінцевий стан першого циклу.
Поширені запитання
Чи можна відтворити лише один раз?
Вимкніть «Повторювати» та задайте кількість повторів 1. Стандартні шаблони починаються з одного відтворення, а для обертання й плавання спочатку ввімкнено безперервний повтор.
До якого елемента потрібно застосувати CSS?
Додайте клас toollet-motion до HTML-елемента та використовуйте його зі створеним CSS. Приклад використання HTML — це фрагмент кнопки, а не повна окрема вебсторінка.
Скільки ключових кадрів можна створити?
Можна створити від 2 до 8 ключових кадрів, включно з початком на 0% і кінцем на 100%. Новий ключовий кадр додається посередині найширшого інтервалу. Початковий і кінцевий кадри не можна видалити; фіксуються лише їхні позиції у відсотках.
Після зміни налаштування зник попередній перегляд.
Результати очищуються після зміни налаштувань, щоб ви випадково не використали рух або код із попередніх налаштувань. Створіть їх ще раз, щоб перевірити поточні налаштування.
Чому попередній перегляд не рухається?
Рух зупиняється, коли на пристрої ввімкнено зменшення руху. Для наведення та фокуса також перевірте умови запуску. Попередній перегляд призупиняється, коли ви переходите на іншу вкладку.
Чи можна використовувати кілька анімацій на одній сторінці?
Створені назви класу й ключових кадрів спільні. Щоб використовувати окремі анімації, змініть обидві назви для кожної анімації та внесіть ці зміни у відповідний HTML.
Введення та результати
- Налаштування
- 12 шаблонів, від 2 до 8 ключових кадрів і тривалість від 0,2 до 60 секунд.
- Відтворення
- Затримка від 0 до 60 секунд, від 1 до 100 повторів або нескінченний повтор, функція плавності, напрямок, стани до й після відтворення та умови запуску.
- Виведення
- CSS і приклад використання HTML. Визначається лише рух; повна вебсторінка чи відеофайл не створюється.