Этот генератор transition CSS3 позволяет вам быстро настроить эффект перехода между двумя состояниями (hover, active, …) элемента HTML с помощью простого редактора и скопировать сгенерированный код CSS прямо в свой проект.

Результат:

.result-transition-item {

-webkit-transition: ;

-moz-transition: ;

-ms-transition: ;

-o-transition: ;

transition: ;

}
Наведите курсор на элемент

 

Transition — это универсальное свойство, которое позволяет одновременно задать значения:

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay
  1. Поле «Свойство (property)» — это transition-property. Свойство transition-property определяет имя свойства CSS, для которого предназначен эффект перехода (эффект перехода начнется при изменении указанного свойства CSS).
    Совет: эффект перехода обычно может возникать, когда пользователь наводит курсор на элемент.
  2. Поле «Продолжительность (duration)» — это transition-duration. Свойство transition-duration указывает, сколько секунд (секунд) или миллисекунд (мс) требуется для завершения эффекта перехода. 
    Примечание: Всегда указывайте свойство transition-duration, иначе длительность будет равна 0 с, и переход не будет иметь никакого эффекта.
  3. Поле «Функция (function)» — это transition-timing-function. Свойство функции времени перехода определяет кривую скорости эффекта перехода. Это свойство позволяет эффекту перехода изменять скорость в течение его продолжительности.