Переходы позволяют анимировать исходное значение свойства на новое значение с течением времени, управляя скоростью смены значений свойств. Такие стилевые изменения связаны с изменением состояния элемента, например, надеведение курсора на элемент (:hover) или клик по флажку (:checked). Следует понимать, что не все свойства могут быть "проанимированы" таким образом. Например, браузер не сможет проанимировать изменение float, font-family и прочих свойств, для которых трудно или невозможно рассчитать промежуточное состояние. Полный список свойств, которые можно анимировать, здесь.
transition-property
margin
background-color
border-radius
all
transition-duration
100ms
500ms
1s
transition-timing-function
ease
linear
ease-in
ease-out
ease-in-out
steps(4,start)
steps(4,end)
cubic-bezier(1,0,1,0);
cubic-bezier(0.6, -0.28, 0.735, 0.045)
cubic-bezier(0.175, 0.885, 0.32, 1.275)
http://easings.net
transition-delay
100ms
200ms
1s
transition
transition: all linear 2s;
transition: margin steps(6,end) 1000ms;
transition: all ease-in-out 0.5s 0.5s;