.box

body {
  background: #CBC2F9;
  display: flex;
  height: 100vh;
}

.box {
  width: 150px;
  height: 150px;
  margin: auto;
  background-color: #5A74C9;
  transition:
    /* step 1 */
    width      .5s ease,
    /* step 2 */
    background-color 0.5s .5s ease;
  
  &:hover {
    width: 300px;
    background-color: #CFF9A9;
  }
}