transitions.css

body {
  background: #333;
}

.box {
  background: white;
  width: 300px;
  height: 300px;
  position: relative;
  margin: auto;
  top: 200px;
  /* transition-property: background, border-radius, transform; */
  transition-property: all;
  transition-duration: 2s;
  /* transition-delay: 2s , 4s; */
  transition-timing-function: ease-in-out;
}

.box:hover {
  background: red;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  transform: rotateY(180deg);
}

/* 
TRANSITIONAL PROPERTIES
-Properties that have an identifiable halfway point

background-color 
background-position 
border-color 
border-width 
border-spacing 
bottom 
color
font-size 
font-weight 
height left 
letter-spacing 
line-height 
margin 
max-height 
max-width 
min-height 
min-width 
opacity 
outline-color 
outline-offset 
outline-width 
padding right 
text-indent 
text-shadow 
top 
vertical-align 
visibility 
width 
word-spacing 
z-index */