Этот генератор transition CSS3 позволяет вам быстро настроить эффект перехода между двумя состояниями (hover, active, …) элемента HTML с помощью простого редактора и скопировать сгенерированный код CSS прямо в свой проект.
Результат:
-webkit-transition: ;
-moz-transition: ;
-ms-transition: ;
-o-transition: ;
transition: ;
}
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
- Поле «Свойство (property)» — это transition-property. Свойство transition-property определяет имя свойства CSS, для которого предназначен эффект перехода (эффект перехода начнется при изменении указанного свойства CSS).
Совет: эффект перехода обычно может возникать, когда пользователь наводит курсор на элемент.
- Поле «Продолжительность (duration)» — это transition-duration. Свойство transition-duration указывает, сколько секунд (секунд) или миллисекунд (мс) требуется для завершения эффекта перехода.
Примечание: Всегда указывайте свойство transition-duration, иначе длительность будет равна 0 с, и переход не будет иметь никакого эффекта.
- Поле «Функция (function)» — это transition-timing-function. Свойство функции времени перехода определяет кривую скорости эффекта перехода. Это свойство позволяет эффекту перехода изменять скорость в течение его продолжительности.