Botones animados CSS3

Para ver en youtube click aquí
Para ver la lista de reproducción de CSS3, click aquí 
Dame like en facebook, click aquí

Código fuente del video

Parte CSS :

a {
  display : inline-block;
  background-color: black;
  padding: 15px;
  color: white;
  position: absolute;
  top: 20px;
  left: 20px;
  border-radius : 5px;
  text-decoration: none;
 }
 .anim2 {
  top: 100px;
 }
 .trans {
  top : 300px;
  transition: background-color 1s;
 }
 .anim3 {
  top: 200px;
 }
 
 @keyframes anim1 {
  0%{
   top: 20px;
  left: 20px;
  }
  25%{
   top: 10px;
  left: 20px;
  }
  50%{
   top: 30px;
  left: 10px;
  }
  100%{
   top: 20px;
  left: 30px;
  }
 }
 
 @keyframes anim2 {
  0%{
   background-color: black;
  }
  25%{
   background-color: red;
  }
  50%{
   background-color: blue;
  }
  100%{
   background-color: black;
  }
 }
 
 @keyframes anim3 {
  0%{
   padding : 15px;
  }
  50%{
   padding : 8px;
  }
  100%{
   padding : 15px;
  }
 }
 .anim1:hover {
  animation : anim1 1s infinite;
 }
 .anim2:hover {
  animation-name: anim2;
  animation-duration: 1s;
  animation-iteration-count : infinite;
 }
 
 .anim3:hover {
  animation : anim3 1s infinite;
 }
 .trans:hover {
  background-color: red;
 }

Parte HTML :

<a href="#" class="anim1" onclick="alert('hola');">Boton1</a>
<a href="#" class="anim2" onclick="alert('hola');">Boton2</a>
<a href="#" class="anim3" onclick="alert('hola');">Boton3</a>
<a href="#" class="trans" onclick="alert('hola');">Transisión</a>