Las bondades del CSS3: transition y transform

   Por supuesto seguimos con la página de ejemplo Las Edades de la Tierra. En esta ocasión voy a comentar cómo animar los enlaces (aunque realmente no es necesario que sean enlaces) sin la necesidad de usar javascript. Con CSS (CSS3) la tarea es relativamente sencilla. En la página de ejemplo podéis ver que tanto en la sección principal (a la izquierda), que abre las explicaciones sobre las diferentes eras y eones, como en la sección de de enlaces, al pasar el puntero del ratón sobre ellos, estos se hacen más grandes, se transforman a una escala mayor y, lo mejor, es que no es necesario usar javascript para realizar el efecto, basta con unas pocas líneas en el CSS. Aviso que en el IE funciona pero regular (no realiza el efecto de transición suave, por lo menos en la versión 9).

   Vayamos al grano, el efecto se consigue combinando las propiedades transition y transform, con las cuales podemos realizar animaciones muy buenas. En el caso del ejemplo de la página web Las Edades de la Tierra, el efecto se realiza con las siguientes lineas en CSS3:

   En el caso de los enlaces de la derecha:

#enlaces a {
    display:block;!important;
    -ms-transition:-ms-transform 300ms ease-out;
    -webkit-transition:-webkit-transform 300ms ease-out;
    transition:transform 300ms ease-out;
}
#enlaces a:hover, #enlaces a:focus {
    -ms-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transform: scale(1.4);
}


   En el caso de zona principal (a la izquierda):

.menu1 li {
    display:block!important;
    -ms-transition:-ms-transform 300ms ease-out;
    -webkit-transition:-webkit-transform 300ms ease-out;
    transition:transform 300ms ease-out;
    cursor: pointer;
}

.menu1 li:hover, .menu1 li:focus {
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);   
}

   Vamos a ver primero  '#enlaces a' y '.menu1 li' que sería dar el formato inicial a los elementos 'a' y 'li' de nuestro HTML.
Primera linea: 'display:block;!important;'. En este caso en concreto  queremos agrandar el tamaño de la letra sobre la cual colocamos el puntero del ratón por lo cual es necesario tener el espacio suficiente cuando esto ocurra, por eso es importante esta linea, sino, la transformación no ocurrirá. La segunda y tercera lineas no las comento porque son lo mismo que la cuarta, pero con los modificadores necesarios para que funcione en navegadores como el IE, el Safari y el Chrome.
La cuarta linea: 'transition:transform 300ms ease-out;'. Aquí está lo importante, definimos a que elemento del CSS aplicamos la transición (a transform), cuanto tiempo durará (300ms) y que se realizará de la manera ease-out (con un final lento). Más sobre esto en w3schools. En la última linea de '.menu1 li' incluyo 'cursor:pointer' porque li no es un enlace propiamente dicho, como lo es a, así que le doy apariencia de enlace al cursor (o al puntero del ratón) cuando este se sitúa encima del elemento.

   Vamos a la segunda parte, '#enlaces a:hover, #enlaces a:focus' y '.menu1 li:hover, .menu1 li:focus' que sería el formato de a y li cuando el puntero del ratón (o el cursor) se sitúa encima del elemento. En este caso con una linea nos sobra (bueno, más si queremos que nos funcione en varios navegadores). La linea es 'transform: scale(1.1);'. En este caso queremos que la transformación haga una escala del elemento, la cual se realizará con las pautas marcadas en transition (ver más posibilidades en w3schools). Y, creo que esto es todo.