Генератор переходов CSS3

Плавный переход непрозрачности

Популярные пресеты

Эффект затухания

Плавный переход непрозрачности

Эффект масштаба

Изменение размера элемента при наведении курсора

Эффект поворота

Поворот элемента при наведении

Эффект скольжения

Перемещение положения элемента

Изменение цвета

Переход цвета фона

О переходах

Переходы CSS позволяют плавно изменять значения свойств в течение заданного периода времени.

Обычно анимированные свойства включают:

  • ширина, высота
  • Отступы, отступы
  • Непрозрачность, цвет
  • transform (scale, rotate, translate)
  • background-color

Совет от профессионала: используйте опцию «Все свойства» для анимации всех изменений.

Preview

HOVER ME

Сгенерированный код

.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; }  .element:hover { /* Hover styles will be generated here */ }

Элементы управления переходом

300
0

Эффекты наведения

100%
100%
0°
0px
0px
8px
8px

Related Tools

CSS Beautifier

Форматируйте и украшайте свой CSS-код с профессиональной точностью

Простое создание преобразований CSS3

Мощный, интуитивно понятный инструмент для создания сложных преобразований CSS3 без написания кода. Визуализируйте изменения в режиме реального времени и копируйте сгенерированный CSS для использования в своих проектах.

Минификатор CSS

Сжимайте и оптимизируйте свой CSS-код с профессиональной точностью

Конвертер заряда

Преобразуйте измерения электрического заряда между различными единицами измерения с высокой точностью

Обфускатор JavaScript

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

Конвертер меньше в CSS

Преобразуйте свой код Less в CSS. Быстро, просто и безопасно.