Índice

Animaciones

El módulo de animaciones permite aplicar movimiento a los elementos HTML de una página sin tener que utilizar JavaScript o algún otro framework. El módulo CSS Animations sigue en estado Working Draft a 19 de febrero de 2013: http://www.w3.org/TR/css3-animations/

La propiedad animation la reconocen perfectamente los navegadores modernos. He aquí la matriz de compatibilidad de Can I use:

images/C22-005.png

Veamos ahora un ejemplo sencillo, en el que vamos a desplazar una caja <div> de izquierda a derecha y de derecha a izquierda, en un movimiento de ida y vuelta.

Inicialmente, tenemos una caja <div> roja que está situada en la parte izquierda de la ventana del navegador.

El código HTML/CSS es:

<!DOCTYPE html>  
<html lang="es">  
<head>  
    <title>Animación</title>  
    <meta charset="UTF-8" />  
    <style>  
        #caja {  
            background-color: red;  
            position: relative;  
            width: 100px;  
            height: 100px;  
        }  
    </style>  
</head>  
<body>  
<div id="caja"><p>&nbsp;</p></div>   ...