div {
  margin: 10px;
  cursor: pointer;
}

/*transition property | transition duration | transition function | transition delay */
.someClass {
  transition-property: background;
  /* transition-property: all; */
  transition-duration: 1s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

.div1 {
  width: 100px;
  height: 100px;
  background-color: red;

  transition: background-color 1s linear;
}

.div1:hover {
  background-color: blue;
  color: #fff;
}

.div2 {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: width 2s, height 2s, background-color 2.2s;
}

.div2:hover {
  background-color: peachpuff;
  width: 300px;
  height: 300px;
}

.div3 {
  width: 100px;
  height: 100px;
  background-color: bisque;
  transition: border 500ms;
}

.div3:hover {
  border: 5px solid red;
}

.div4 {
  width: 100px;
  height: 100px;
  background-color: greenyellow;
  transition: opacity 500ms;
}

.div4:hover {
  opacity: 0;
}