Не срабатывает transition

231

19 июля 2017, 23:12

В этом случае цвет фона меняется плавно, а ширина - как если бы свойство transition не было бы задано, скачком.

Что здесь не так?

.h01 {
    width: 100px;
    height: 100px;
    background: #FFCC00;
    transition: width 3s;
    transition: background 3s;
}
.h01:hover {
    width: 200px;
    background: #000000;
}

Answer 1

Переходы нужно указывать через запятую.

.h01 { 
  width: 100px; 
  height: 100px; 
  background: #FFCC00; 
  transition: width 3s, background 3s; 
} 
 
.h01:hover { 
  width: 200px; 
  background: #000000; 
}

<div class="h01"></div>

Также можно указать transfition: all 3s; - тогда анимированные переходы будут у всех свойств.

.h01 { 
  width: 100px; 
  height: 100px; 
  padding: 10px; 
  background: #FFCC00; 
  color: #000; 
  transition: all 3s; 
  border: transparent solid 5px; 
} 
 
.h01:hover { 
  width: 200px; 
  background: #000000; 
  color: #fff; 
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.7); 
  border-color: #f00; 
}