Генератор переходов 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 с помощью нашего интуитивно понятного интерфейса перетаскивания.

Конвертер стилуса в CSS

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

Конвертер SCSS в CSS

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

CMYK в PANTONE

Преобразование значений цветов CMYK в ближайшие эквиваленты Pantone® для дизайна печати

Калькулятор маржи

Рассчитайте маржу прибыли, валовую маржу и наценку с помощью нашего комплексного калькулятора маржи.

SHA3-256 Калькулятор хеша

Быстрая и простая генерация хэшей SHA3-256