Logo

Realizar animaciones en la página es muy fácil con CSS3

Aprende Web

Crea y diseña tus sitios en la Web.

Animacion en CSS3

Buscar en Aprende Web

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Introduccion a las animaciones
Desarrollo Web
animations CSS
W3CScools
CSS3 Transitions
W3CScools
CSS Animations Module Level 3
W3C Working Draft 20 March 2009
CSS Transitions Module Level 3
W3C Working Draft 01 December 2009
CSS 2D Transforms Module Level 3
W3C Working Draft 01 December 2009
CSS 3D Transforms Module Level 3
W3C Working Draft 20 March 2009
Uso de CSS transforms
mozilla: centro de documentación.
Curva de Bézier
Wikipedia.
Coordinate Transformation Matrices
Math is amazingy powerful
IE's CSS3 Transforms Translator
User Agent Man

Donativos

Aprendeweb es un proyecto no comercial, sin embargo el mantenimiento de la página tiene unos costes. Agradeceríamos si pudieras colaborar con una pequeña contribución:


Twitter

Facebook

Google+

Aprende Webon Google+

Animacion CSS3 (I)

Mi primera animación

imagen css3_anim

Cómo crear animaciones

Una animación es cualquier elemento o grupo de elementos que se mueve o cambia de aspecto progresivamente.

Hasta ahora las animaciones en la web debíamos hacerlas con javascript o con algún programa externo como "flash" o "java".

El proceso para crear una animación puede ser más o menos complicado según el programa que usemos y el tipo de animación. En una animación un elemento cambia de estado, bien sea cambiando de sitio, de tamaño, de color, de forma, etc. Este cambio se realiza de manera gradual, de forma que vemos como el elemento va cambiando, la velocidad de cambio debe ser tal que el ojo la perciba como un movimiento continuo (superior a 10 o 12 cambios por segundo).

Las primeras animaciones se hacían indicando uno a uno cada cambio de estado o posición del elemento, e incluso teniendo que redefinir el elemento en cada punto de ese cambio. Cada uno de los cambios que tiene el elemento desde su estado inicial al final es un fotograma. En lenguajes como javascript debemos definir fotograma a fotograma toda la transición del elemento, aunque para ello nos ayudamos de elementos como los bucles que repiten automáticamente el proceso.

Las animacones con CSS3 son bastante más sencillas, ya que utilizan un método usado en programas como "flash", el de los fotogramas clave.


Fotograma clave

Los fotogramas clave son los que marcan el estado del elemento animado al principio, al final, o cuando éste tenga que variar de forma no previsible.

En un ejemplo sencillo, si queremos que un elemento se mueva de izquierda a derecha, posicionamos en el primer fotograma el elemento en un punto a la izquierda, y en el segundo fotograma lo posicionamos a la derecha. le indicamos luego el tiempo que tiene que tardar de ir de uno a otro; si queremos que después el elemento siga moviéndose hacia abajo, lo posicionaremos en un tercer fotograma clave, situado en un punto debajo del segundo. El elemento recorrerá en línea recta del primero al segundo fotograma y seguidamente del segundo al tercero. Todos los estados intermedios del elemento entre los fotogramas 1, 2 y 3 se calculan automáticamente. Ahora veamos cómo se hace todo esto con CSS3.


La regla @keyframes

En CSS los fotogramas clave se crean mediante la regla @keyframes la cual tiene la siguiente estructura:

@keyframes <nombre> {
      0%{<propiedad: valor>+}
      100%{<propiedad: valor>+}
      }  

En el selector escribimos la palabra clave @keyframes seguido de un nombre que nosotros le daremos a la animación. Este nombre es necesario para poder dar después otras propiedades de animación, como puede ser el tiempo.

Dentro de la declaración (espacio entre llaves) pondremos los diversos fotogramas clave. los cuales son unas sub-reglas CSS compuestas de:

NAVEGADORES: La regla @keyframes está disponible sólo de forma experimental en los navegadores Firefox, Safari y Chrome. Para Firefox debemos escribirla con prefijo @-moz-keyframe y para Safari y Chrome debemos escribir @-webkit-keyframe. (noviembre 2011)


Propiedades de animación.

Aunque las veremos en la próxima página más detalladamente, vamos a ver aquí las propiedades necesarias para crear una animación simple. En primer lugar debemos indicar qué elemento de la página es el que tiene la animación. Esto se hace mediante la propiedad:

#anim { animation-name: <nombre> }

El "nombre" que pongamos como valor debe ser el mismo que lleva la regla @keyframe; de esa manera quedará asociada al elemento que marca el selector.

En segundo lugar debemos marcar el tiempo que dura la animación. Este lo indicamos mediante la propiedad:

animation-duration: <tiempo>;

El "tiempo" lo expresaremos en segundos (ej.: 10s) o en milisegundos (ej.: 4000ms) indicandolo en número seguido de la/s letra/s "s" para segundos o "ms" para milisegundos.

Aunque con esto ya podemos hacer una animación muy sencilla, la animación que vamos a hacer como ejemplo tendrá otras dos propiedades, la primera de ellas hará que la animación se repita indefinidamente:

animation-iteration-count: infinite;

El valor "infinite" hace que la animación se repita indefinidamente. Además de este valor, a esta propiedad se le puede dar como valor un número entero positivo, que será el número de veces que se repita la animación.

Por último queremos que la animación, una vez llegue al final, recorra el camino inverso, viéndose otra vez todo al revés. para ello utilizaremos la propiedad:

animation-direction: alternate;

el valor "alternate" hace que la animación al llegar al final se repita en sentido inverso. También puede tener el valor normal que hace que la animación vaya sólo en una dirección.

NAVEGADORES: Estas propiedades sólo están disponibles de forma experimental en Firefox (con prefijo -moz-) y en Safari y Chrome (prefijo -webkit-).


Ejemplo de animación:

Con lo que hemos visto hasta ahora ya podemos hacer un ejemplo de animación sencillo. El ejemplo consistirá en un cuadrado que se mueve horizontalmente mientras cambia de color.

veamos primero la regla @keyframes; como sólo es compatible con Mozilla, Safari y Chrome de forma experimental, la deberemos reescribir varias veces con sus correspondientes prefijos:

/*Regla según W3C*/
@keyframes mianim { 
   from { left: 50px; background-color:red } /*Fotograma inicio*/
   to { left: 600px; background-color:blue } /*Fotograma final*/
}
/*repetimos para Mozilla*/
@-moz-keyframes mianim { 
   from{ left: 50px; background-color:red; } 
   to{ left: 600px; background-color:blue; } 
}
/*repetimos para Safari y Chrome*/
@-webkit-keyframes mianim { 
   from{ left: 50px; background-color:red } 
   to{ left: 600px; background-color:blue } 
}

En los fotogramas clave marcamos en el de inicio la posición de partida (left: 50px) así como el color que tendrá cuando esté en esa posición (background-color:red); y en el fotograma final la posición y color que tendrá cuando llegue al final left: 600px; background-color:blue) . Hemos usado aquí las palabras clave from para el inicio y to para el final, que equivalen al 0% y 100% respectivamente.

El elemento animado debe tener un posicionamiento relativo para que pueda moverse. esto es algo muy importante, ya que si no la animación no funcionará. Además le daremos las propiedades anchura, altura y borde para convertirlo en un cuadrado. Escribimos esto en el archivo CSS:

/*posicionamiento, anchura, altura y  borde elemento.*/
#anim { position: relative ; 
        width: 100px; height: 100px; 
        border: 1px solid black; }

Ahora pondremos las propiedades de animación necesarias para que la animación funcione, que son las indicadas anteriormente. Como sólo se ven en Firefox, Safari y Chrome de forma experimental, deberemos repetir el código para cada navegador. Completamos el archivo CSS.

/*propiedades de animación*/
/*W3C*/
#anim { animation-name: mianim; /*referencia nombre*/
        animation-duration: 5s; /*tiempo*/
        animation-iteration-count: infinite; /*repeticion indefinida*/
        animation-direction: alternate; /*repetir al revés*/
      }
/*código para Firefox*/
#anim { -moz-animation-name: mianim; 
        -moz-animation-duration: 5s; 
        -moz-animation-iteration-count: infinite; 
        -moz-animation-direction: alternate; 
      }
/*código para Safari y Chrome*/
#anim { -webkit-animation-name: mianim; 
        -webkit-animation-duration: 5s; 
        -webkit-animation-iteration-count: infinite; 
        -webkit-animation-direction: alternate; 
      }

Guardamos el archivo CSS (mianim.css) y creamos el archivo HTML, el cual será así de sencillo:

<!DOCTYPE HTML>
<html>
<head>
  <title>Mi Primera Animación</title>
  <link rel="stylesheet" type="text/css" href="mianim.css" />
</head>
<body>
  <h1>MI primera animación</h1>
  <div id="anim"></div>
</body>
</html>

El ejemplo anterior quedará como en el siguiente enlace, (recuerda que debes usar Firefox, Safari o Chrome para poder ver la animación):

MI primera animación





En la siguiente página veremos más detenidamente las propiedades de animación

Propiedades de animación.



Animación CSS3

Anterior siguiente ... Siguiente siguiente

Estadísticas con Motigo

Free counter and web stats

imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Más sobre anyelguti en http://anyelguti.16mb.com