④ Задержка перехода transition-delay

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

• ① Название свойства transition-property
• ② Продолжительность перехода transition-duration
• ③ Функция перехода transition-timing-function

Необязательное свойство, позволяет сделать так, чтобы изменение свойства происходило не моментально, а с некоторой задержкой. Не наследуется.

transition-delay

Значения:

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

Синтаксис

CSS

div {
transition-delay: .5s;
}

HTML

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

CSS

body {font-family: 'Playfair Display', serif; margin: 0;}
.wrap {
  margin: 20px 0 0;
  text-align: center;
}
.container {display:inline-block}
h1 {
  color: #3A262F;
  font-weight:normal; 
}
kbd{display:block;margin-bottom:15px;}
.box {
  border-radius: 8px;
  margin: 20px;
  width: 60px;
  height: 60px;
}
.wrap:hover .box {
  transform: scale(1.5);
}
.box1 {
  background:#BED3E4;
  transition: 1s linear;
}
.box2 {
  background:#BCB4D9;
  transition: 1s linear .5s;
}
.box3 {
  background:#EBC0AD;
  transition: 1s linear 1s;
}

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