② Продолжительность перехода transition-duration

Продолжим изучение темы CSS3 - переходы. Если пропустили прошлую статью, то вот ссылка на неё:

• ① Название свойства transition-property

Задаёт промежуток времени, в течение которого должен осуществляться переход. Если разные свойства имеют разные значения для перехода, они указываются через запятую. Если продолжительность перехода не указана, то анимация при смене значений свойств происходить не будет. Свойство не наследуется.

transition-duration

Значения:

• время - Время перехода указывается в секундах или миллисекундах, например, 2s или 5ms.
• initial - Устанавливает значение свойства в значение по умолчанию.
• inherit - Наследует значение свойства от родительского элемента.

Синтаксис

CSS

div {
transition-duration: .2s;
}

HTML

<div class="wrap">
  <h1>Наведите на блок</h1>
  <kbd>transition-duration</kbd>
  <div class="container">
    <span>0.5s</span>
    <div class="box1 box"></div>
  </div>
   <div class="container">
    <span>1s</span>
    <div class="box2 box"></div>
  </div>
   <div class="container">
    <span>2s</span>
    <div class="box3 box"></div>
  </div>
</div>

CSS

body {font-family: 'Playfair Display', serif; margin: 0;}
.wrap {text-align: center;}
.container {
  display: inline-block;
}
h1 {
  color: #3A262F;
  font-weight:normal; 
  text-align: center;
}
kbd{display:block;text-align:center;margin-bottom:20px;}
.box {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  margin: 20px 50px 0;
}
.wrap:hover .box {
  -webkit-transform: scale(2);
  -ms-ransform: scale(2);
  transform: scale(2);
}
.box1 {
  background: #FFD592;
  transition: .5s;
}
.box2 {
  background: #F9A88B;
  transition: 1s;
}
.box3 {
  background: #B39190;
  transition: 2s;
}

Продолжение в следующей статье!