<p>Вибери потрібні значення для <code>transition-property</code>, а потім спробуй навести курсор на блок:</p>

<select id="form">
  <option value="all" name="value2" selected>all</option>
  <option value="width" name="value2">width</option>
  <option value="color" name="value2">color</option>
  <option value="background" name="value2">background</option>
</select>

<p id="text"></p>

<hr>

<div id="block"><p>Блок</p></div>
* {
  box-sizing: border-box;
  padding: 0;
}

body {
  text-align: center;
  font-family: momospace;
  font-size: 17px;
  line-height: 1.5;
  color: #222;
}


#form {
  padding: 8px 16px;
  font-size: 19px;
}

#block {
  margin: 75px auto 0 auto;
  background: gold;
  width: 250px;
  padding: 16px;
  font-size: 18px;
  color: #222;
  transition: all .75s ease-in 0s;
}

#block:hover {
  width: 350px;
  color: red;
  background: #000;
}
var block = document.getElementById('block');
var form = document.getElementById('form');
var text = document.getElementById('text');

  var textArray = {'all': 'Анімуються всі задані властивості',
                  'width': 'Анімується тільки ширина',
                  'color': 'Анімується тільки колір тексту',
                  'background': 'Анімується тільки фоновий колір'};

form.onchange = function change() {
  
  var newVal = getNewValue();  
  block.style.transitionProperty = newVal;
  text.innerHTML = textArray[newVal];
  
}

function getNewValue() {
  
  var result = '';
  
  for (var i = 0; i < form.options.length; i++) {
    if (form.options[i].selected == true) {
      result = form.options[i].value;
    }
  }
  
  return result;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.