/ Курсы CSS / Свойство transition

Свойство transition


Свойство transition


  transition: none| transition-property transition-duration transition-timing-function 
  transition-delay;

Свойство transition устанавливает эффект перехода между двумя состояниями элемента. Свойство transition позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay.

Свойство transition-property

Свойство transition-property устанавливает имя стилевого свойства. Значения к transition-property

none - отменяет тень.
all - значение по умолчанию.
inherit - наследует значение родителя.

Свойство transition-duration

Свойство transition-duration задает время длительности анимации.

Свойство transition-timing-function

Свойство transition-timing-function устанавливает скорость изменения значение стилевого свойство для которого применяется эффект перехода. Значения к transition-timing-function

linear - одинаковая скорость от начала и до конца. .
ease - анимация начинается медленно, затем ускоряется и к концу движения опять замедляется.
ease-in - анимация медленно начинается, к концу ускоряется.
ease-out - анимация начинается быстро, к концу замедляется.
ease-in-out - анимация начинается и заканчивается медленно.
step-start - устанавливает конечное значение.
step-end - устанавливает сначало значение в начальном заданном времени, затем сразу же принимают конечное значение.
steps - ступенчатая функция, имеющая заданное число шагов.

Свойство transition-delay

Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода.

Пример использования:


 <style>
 #block {
         border: 1px solid black;
  -moz-transition: width 2s, height 4s linear 3s;
  -webkit-transition: width 2s, height 4s linear 3s;
  transition: width 2s, height 4s linear 3s;
  width: 150px;
  height: 25px;
     }
     #block:hover {
  width: 400px;
  height: 50px;
}

  </style>
  <div id="block"></div>