Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Animacion en CSS3

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

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

RSS. Suscribir canal.



Animación CSS3 (II)

Propiedades de animación

Funcionamiento

Si estás siguiendo este manual habrás visto en la página anterior cómo crear la regla @keyframes. En ella indicabamos los fotogramas clave y el estado de la animación al pasar por cada uno de esos fotogramas. También habrás visto algunas propiedades de animación que hemos usado para poder hacer una primera animación.

En esta página veremos más a fondo estas propiedades de animación y explicaremos algunas otras.

Las propiedades de animación y la regla @keyframes se complementan, ya que no tienen sentido las unas sin la otra y viceversa.

NAVEGADORES: Como ya se dijo en la página anterior, los principales navegadores soportan las animaciones, si bien en Chrome y Safari lo hacen de forma experimental, (marzo 2014) es decir utilizando el prefijo -webkit-. Es más que probable que en un futuro próximo estos dos navegadores adopten también la forma estándar, mientras tanto, si queremos que la animación funcione, debemos duplicar el código, poniendolo en su forma estándar, y también en la forma experimental (con -webkit-) para estos navegadores.

Antes de empezar con las propiedades de animación, veamos algo más sobre los fotogramas clave:

Fotogramas clave

Recordemos la regla "@keyframes";

@keyframes <nombre> { <fotograma> || <fotograma>+ }

El <nombre> es un elemento identificativo. Podemos poner cualquier palabra siempre que sigamos una serie de reglas que son las mismas que para escribir archivos, es decir, no utilizar espacios en blanco, no empezar por un número, se puede usar el guión normal o el guión bajo, y no es recomendable utilizar acentos o la letra "ñ".

Los "<fotograma>"; : Cada fotograma es en sí una regla CSS compuesta de un selector y una declaración, en la que puede haber una o varias propiedades. Es obligatorio poner al menos dos fotogramas, que serán el inicio y el final de la animación.

el selector del <fotograma> : El selector indica el punto temporal de la animación en el que se llega al estado marcado en las propiedades. Si sólo hay dos fotogramas los selectores deben marcar el inicio y final de la animación y pueden ser las palabras clave from (inicio) y to (final).

Si hay más de dos fotogramas debemos poner los fotogramas intermedios, para ello los selectores serán un número expresado en tantos por ciento; el 0% Es el fotograma de inicio, y es obligatorio, el 100% es el fotograma final, y también es obligatorio. Si sólo hay dos fotogramas también podemos expresarlo así, pero si hay más pondremos como selector los tantos por ciento intermedios de cada fotograma.

Las propiedades del <fotograma> : Dentro de la declaración del fotograma (entre llaves) pondremos las propiedades que queremos que cambien a lo largo de la animación. Lo normal es poner las mismas propiedades en varios fotogramas, pero con diferentes valores.

El paso de un fotograma clave al siguiente se realiza de forma progresiva, siempre que esto sea posible. Sólo las propiedades cuyo valor esté basado en un número (números, medidas, porcentajes, colores) pueden variar progresivamente. Las propiedades cuyos valores no son números (palabras clave, nombres, urls, etc.) son ignoradas, y no se puede hacer ningún tipo de cambio en ellas.

Para mover un elemento dentro de la página, éste debe estar posicionado, es decir, tiene que tener la propiedad position: absolute; o position: relative;, ya que de otro modo no se le pueden aplicar las propiedades de posicionamiento (left, right, top, bottom), que son las que cambian el elemento de sitio.

Propiedad animation-name.

La propiedad animation-name es obligatoria o imprescindible para que la animación funcione correctamente, ya que indica a qué elemento deben aplicarsele los fotogramas clave de la regla @keyframes:

#capa1 {animation-name: <nombre>;}

El valor (<nombre>) debe ser el <nombre> que se ha puesto en el selector de la regla @keyframes. Así los fotogramas se aplicarán al elemento al que se refiere esta regla (#capa1).

Propiedad animation-duration:

La propiedad animation-duration indica el tiempo que va a durar la animación. Es por tanto imprescindible u obligatoria, ya que toda animación tiene siempre una duración en el tiempo:

animation-duration: <tiempo>;

Los valores de <tiempo> se expresan siempre mediante un número seguido de la letra "s" cuando el tiempo es en segundos, o "ms" cuando es en milisegundos.

Propiedad animation-direction:

La propiedad animation-direction indica si la animación al llegar al final acaba, o si debe volver a verse en sentido inverso:

animation-direction: normal | alternate;

Los dos posibles valores que tiene esta propiedad son:

• normal : Es el valor por defecto, la animación, una vez concluido el tiempo que se le ha marcado finaliza.
• alternate : Este valor indica que una vez finalizada la animación esta se repite en sentido inverso, volviendo a reproducirse la secuencia de atrás a adelante.

Tanto esta propiedad como las siguientes no son obligatorias, sin embargo la mayoría de las veces debemos ponerlas para conseguir los efectos deseados.

Propiedad animation-iteration-count

La propiedad animation-iteration-count indica las veces que se repetirá la animación, éstas pueden ir desde 1 hasta infinito.

animation-iteration-count: <entero_positivo> | infinite;

Los posibles valores son la palabra clave infinite que indica que la animación se repetirá indefinidamente, o un número entero positivo, que indica el número de veces que se repetirá la animación. Su valor por defecto es 1, es decir, de no poner esta propiedad la animación se ejecuta una vez.

Las propiedades vistas hasta aquí son las que hemos empleado en la página anterior para realizar nuestro ejemplo de "mi primera animación", pero hay más propiedades:

Propiedad animation-delay

La propiedad animation-delay indica el tiempo que tarda la animación en empezar después de cargarse la página:

animation-delay: <tiempo>;

El valor es una unidad de tiempo que se expresa en segundos o milisegundos, igual que en la propiedad animation-duration. Tras cargarse la página, se esperará el tiempo indicado para iniciar la animación.

Propiedad animation-timing-function

La propiedad animation.timing-funtion controla los cambios en la velocidad mientras se produce la animación.

animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);

La velocidad a lo largo de la animación puede sufrir cambios, los diferentes valores de esta propiedad controlan la velocidad a lo largo de la animación. Éstos son:

• linear : La velocidad de la animación se mantiene constante durante toda su duración.

• ease : Es el valor por defecto. La animación va lenta al principio para volverse rápida en el medio, y terminar mucho más lenta.
• ease-in : La animación se muestra lenta al principio, para coger al final su máxima velocidad.
• ease-out : La animación es rápida al principio y va disminuyendo en velocidad para ser lenta al final.
• ease-in-out : La animación va lenta al principio, se vuelve rápida a la mitad, para acabar lenta.
• cubic-bezier (n,n,n,n) : Definimos la velocidad de la animación en base a una curva cúbica de Bezier. Para ello incorporamos cuatro valores "n" que serán números decimales entre el 0 y el 1.

Las curvas de Bezier son el resultado de unas fórmulas matemáticas, si no estás familiarizado con esto puedes consultarlo en Wikipedia: curvas de Bézier; y en concreto el apartado Construcción de curvas de Bézier, donde se muestra mediante gráficos cómo se construyen estas curvas.

Propiedad animation-play-state

La propiedad animation-play-state indica si la animación está ejecutándose o está en pausa.

animation-play-state: paused | running;

Sus dos posibles valores son paused, que indica que la animación está en pausa, y running, que indica que la animación se está ejecutando. Éste último es el valor por defecto.

Sin duda, la utilidad más común de esta propiedad es utilizarla con javascript, para que el usuario pueda mediante algún botón pausar o poner en marcha la animación.

Propiedad animation tipo "shorthand"

Todas las propiedades anteriores de animación pueden reunirse en una sola de tipo "shorthand":

animation:<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction>]

Como valores pondremos primero el nombre animation-name, después el tiempo de duración: animation-duration; después el tipo de velocidad animation-timing-function, seguimos con el tiempo de retardo de comienzo animation-delay, después el número de repeticiones animation-iteration-coun y acabamos con la propiedad de dirección animation-direction.

Este es el orden recomendado por la W3C. Las propiedades que no son imprescindibles pueden omitirse. El orden de las propiedades puede cambiar en las propiedades no obligatiorias. Las propiedades animation-name y animation-duration (obligatorias) deben ser las primeras.

Propiedades de animación y javascript

Muchas animaciones que se hacen con javascript pueden hacerse con CSS de una forma mucho más sencilla. De todos modos tenemos que seguir usando javascript si queremos interactuar con el usuario, por ejemplo botones para parar o poner en marcha la animación, o para que se pueda regular la velocidad, etc., siguen necesitando de javascript.

El empleo de estas propiedades en Javascript se hace como con cualquier otra propiedad CSS. por ejemplo animation-delay se escribirá: animationDelay.

Sin embargo como tenemos que duplicar la propiedad con el prefijo -webkit- para poder utilizar los navegadores Safari y Chrome, esta también debemos ponerla dos veces en javascript, por ejemplo, después de extraer el elemento del DOM escribiremos:

elemento.style.animationDelay = "paused";

elemento.style.WebkitAnimationDelay = "paused";

La primera línea activa la propiedad en Firefox, Opera y IE10; y la segunda en Safari y Chrome.

---

En la siguiente página veremos algunos ejemplos de animación con CSS.

Ejemplos de animación

Página creada por ANYELGUTI.

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

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

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