CSS Transition Generator
Configure CSS transitions with hover preview.
Переход 1
Наведите курсор
.element {
transition: all 0.3s ease 0s;
}
.element:hover {
/* apply your hover styles here */
}Об этом инструменте
Генератор CSS-переходов настраивает сокращённое свойство transition, задавая целевое свойство, длительность, функцию времени и задержку. Интерактивный предпросмотр показывает поведение перехода до копирования кода.
CSS-переходы создают плавные изменения состояния между двумя CSS-значениями, инициируемые псевдоклассами :hover, :focus или изменениями классов через JavaScript.
Как использовать
- Выберите CSS-свойство для перехода (или используйте all).
- Задайте длительность — сколько длится переход (напр., 0.3s).
- Выберите функцию времени для управления кривой ускорения.
- Дополнительно добавьте задержку перед началом перехода.
- Наведите курсор на блок предпросмотра для живого просмотра, затем скопируйте CSS.
Случаи использования
Разработчики используют переходы для эффектов наведения на кнопки, масштабирования карточек и плавного изменения цвета ссылок. Дизайнеры форм используют их для стилей фокуса ввода.
Частые вопросы
- В чём разница между transition и animation? — Переходы реагируют на изменение состояния (например, наведение); анимации запускаются автоматически или в цикле с помощью ключевых кадров.
- Можно ли анимировать несколько свойств? — Да. Нажмите «Добавить переход», чтобы добавить несколько правил свойств, разделённых запятыми.
- Какие свойства можно анимировать? — Большинство свойств с числовыми значениями: opacity, color, transform, размеры и др. Свойства вроде display не анимируются.