Índice

Animación de la aplicación

Una de las principales novedades aportadas por CSS 3 son las animaciones. Es posible animar elementos HTML directamente en CSS, aunque antes era preciso utilizar JavaScript.

El módulo ngAnimate permite soportar animaciones CSS 3 en las directivas de AngularJS.

1. Animaciones CSS 3

Existen dos tipos de animaciones en CSS 3. Las transiciones, que permiten definir animaciones cuando cambia el valor de una propiedad CSS, y los keyframes, que permiten definir animaciones más complejas.

a. Transiciones

Las transiciones se declaran mediante las propiedades CSS transition-delaytransition-duration, transition-property y transition-timing-function, que definen respectivamente cuándo empezará la animación, la duración de la animación, sobre qué propiedad CSS se produce la animación y qué función de interpolación se utilizará para la animación.

Es posible combinar las distintas propiedades utilizando la propiedad CSS transition, que se usa de la siguiente manera:

transition: property duration timing-function delay;

He aquí un ejemplo de transición CSS:

a {  
    font-size: 16px;  
    font-weight: bold;  
    color: black;  
    text-decoration: none;  
            
    -moz-transition: color 1s linear;  
    -o-transition: color 1s linear;  
    -webkit-transition: ...