Sin duda es el efecto más espectacular a aplicar sobre un elemento mediante CSS3. Permite pasar de un estado del elemento a otro haciendo un paso gradual en el tiempo que se configure. Por ejemplo, podemos hacer que una capa pase a doblar su tamaño poco a poco.
Este tipo de efectos se solían hacer con JavaScript, ahora es posible (aunque desde luego no con todas las posibilidades de JavaScript), desde CSS3.
En este código HTML:
<!doctype html> </body> |
Muestra en pantalla un rectángulo de color rojo; al arrimar el ratón sobre él (comportamiento :hover) el rectángulo crece hasta los trescientos píxeles.
Mediante las transiciones podemos hacer que ese cambio se realice progresivamente (de otro modo, el cambio aparece de golpe). Las propiedades relacionadas con transiciones son:
Ejemplo:
transition-duration:2s;
transition: propiedad tiempo funciónDeTiempo retardo; |
No hay por qué rellenar todos los valores. Es decir, podemos indicar sólo la propiedad y el tiempo (el resto tomarán los valores por defecto)
Hay que tener en cuenta que sólo lo navegadores recientes soportan esta propiedad, antes todos ellos requerían el uso de prefijos.
Así por ejemplo cambiando el CSS del código del ejemplo anterior por:
div{
background-color:red;
width:50px;
height:50px;
} div:hover{
width:300px;
transition: 2s;
} |
Ya tendríamos un efecto de transición que dura dos segundos para pasar del tamaño anterior de la capa al nuevo simplemente arrimando el ratón.
Otro ejemplo, podría ser:
div{
background-color:red;
width:50px;
height:50px;
} div:hover{
width:300px;
transition: width 3s ease-in 1s; } |
Transición para modificar la anchura, que dura tres segundos, acelera al final y tarda un segundo en empezar
Es posible hacer múltiples transiciones a la vez en el objeto, ejemplo:
transition: background-color 4s,
width 500ms,
transform 4s;
|
Las animaciones son parecidas a las transiciones con la diferencia de que tienen la posibilidad de que se ejecuten directamente, sin hacer ningún tipo de evento.
Son más potentes (y más complejas de crear) que las transiciones, y tienen una gran conexión con el lenguaje JavaScript.
Las animaciones requieren primero de un bloque @keyframes (para navegadores webkit hay que usar además la variante @-webkit-keyframes) que es el encargado de establecer las propiedades de la animación y de dar nombre a la misma. Dentro de ese bloque se establecen dos elementos:
Ejemplo:
@keyframes ani1{
from{
left:20px;
background-color: red;
} to{
left:220px;
background-color:blue;
} } |
También podemos establecer indicar en lugar de origen y final, pasos en porcentaje, por ejemplo:
@keyframes ani1{
from{
left:20px;
background-color: red;
} 50%{
background-color: green;
} to{
left:220px;
background-color:blue;
} } |
En esta animación, el color de fondo se va cambiando a verde antes de convertirse en azul.
Las propiedades que pueden ser animadas son las mismas que las comentadas en el apartado dedicado a las transiciones. En realidad transiciones y animaciones operan de forma muy parecida.
Las propiedades relacionadas con las animaciones son:
Es decir, el valor alternate en una animación que muestre una capa de moviéndose de izquierda a derecha, hará que al acabar la animación, ahora continúe de derecha a izquierda haciendo el movimiento contrario.
Como suele ocurrir en CSS, existe una sola propiedad que permite resumir todas las anteriores. Para eso se usa la propiedad animation (en navegadores Webkit es –webkit-animation), que tiene esta sintaxis:
animation: nombre duración funciónDeTiempo retardo contador dirección; |
Ejemplo completo:
<!doctype html>
|
/*capa que aplica la animación */
} |
Este código muestra un cuadrado rojo que se desplaza continuamente hacia la derecha y luego vuelve a la izquierda. Además cambia el color de rojo a azul a la vez que se mueve.