Y nos animamos un poco más

En un principio, usábamos onmouseover; era simple y práctico pero estaba limitado a los enlaces; más adelante, esta posibilidad se extendió a casi cualquier otra etiqueta y las cosas comenzaron a ser un poco menos estáticas que antes:

<style>
  #dbox {
    background-color: #808991;
    color: #FFF;
  }
  #dbox:hover {
    background-color: #D0D941;
    color: #000;
  }
</style>
<div id="dbox"> onmouseover </div>

onmouseover

Pasaron años para que eso tan simple que es cambiar una serie de propiedades por otras ante cierta acción como poner el cursor encima, se transformara un poco haciendo que ese cambio fuera mostrado de manera pausada, paso por paso, de tal modo de crear un efecto animado que podemos controlar con la propiedad transition así que a eso mismo, basta agregarle:

<style>
  #dbox {
    .......
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
  }
</style>
<div id="dbox"> transition </div>

transition

Como el tiempo se ascelera, la llegada de la versión 5 de Firefox nos lleva a otro nivel ya que incorpora toda una serie de propiedades de animación más sofisticadas, algo que ya podíamos ver en Chrome y Safari.

animation

Así que ahora, no queda más remedio que salir a investigar un poco:

❅

❄

❅

❄