i {
  color:black;
  /* First we need to help some browsers along for this to work.
     Just because a vendor prefix is there, doesn't mean it will
     work in a browser made by that vendor either, it's just for
     future-proofing purposes I guess. */
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

i.facebook:hover { color:#3b5998; }
i.mail:hover { color:#d64937; }
i.linkedin:hover { color:#58a3c9; }

body {
  margin:100px 50px; padding:0px;
  }