Edit in JSFiddle

Result
CSS
HTML

.wrap {
  width: 500px;
  border: 1px solid #ccc;
  margin-top: 1em;
  padding: 1em;
}

.wrap>div {
  position: relative;
  width: 100px;
  margin: 5px;
  padding: 5px;
  white-space: nowrap;
  
  left: 0px;
  height: 20px;
  background-color: pink;
}

.wrap:hover>div {
  left: 380px;
  height: 40px;
  background-color: blue;
  color: #ccc;
}

.property_all {
  transition-duration: 2s;
  transition-property: all
}

.property {
  transition-duration: 2s;
  transition-property: height, background-color
}

<!DOCTYPE html>
<html lang="ko">
  <head></head>
  <body>
    <h2>transition-property 마우스를 오버하세요.</h2>
    <div class="wrap">
      <div class="property_all">all</div>
      <div class="property">height, background-color</div>
    </div>
  </body>
</html>