#transition1{
  width: 400px;
  height: 400px;
  background: #0099ff;
  -webkit-transition: width 2s;
  transition: width 2s;
}

#transition1:hover{
  width: 800px;
}

#transition2{
  width: 400px;
  height: 400px;
  background: #0099ff;
  -webkit-transition: width 2s, background 4s;
  transition: width 2s, background 4s;
}

#transition2:hover{
  width: 800px;
  background: red;
}

#transition3{
  width: 400px;
  height: 400px;
  background: #0099ff;
  -webkit-transition: width 1s, background 1s;
  transition: width 1s, background 1s;
  -webkit-transition-delay: 1s;
  transition-delay: 1s;
}

#transition3:hover{
  width: 800px;
  background: red;
}

#transition4{
  width: 100px;
  height: 100px;
  background: #0099ff;
  -webkit-transition: width 2s, height 2s, background 2s, -webkit-transform 2s;
  transition: width 2s, height 2s, background 2s, transform 2s;
}

#transition4:hover{
  width: 300px;
  height: 300px;
  background: red;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

#transition5{
  width: 100px;
  height: 100px;
  background: #0099ff;
  -webkit-transition: width 2s, height 2s, background 2s, -webkit-transform 2s;
  transition: width 2s, height 2s, background 2s, transform 2s;
  transition-timing-function: ease-in-out;
}

#transition5:hover{
  width: 300px;
  height: 300px;
  background: red;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}


/* ANIMATIONS */

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

@keyframes example2 {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: green;}
  100% {background-color: blue;}
}

@keyframes example3 {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}