CSS3 HTML5

Los nuevos estándares para el diseño y desarrollo web y Móvil

Capacitación HTML5

Animaciones con CSS3

| 2 Comentarios

Las animaciones en CSS representan una de las características más esperadas del nivel 3 de este estándar. Con la introducción del concepto de keyframes en CSS3, ahora es posible determinar una trayectoria para animar elementos.

Este es uno de los temas que mayor expectativa despierta cuando doy clases sobre HTML5 y CSS3. Una de las razones es porque esta es una de las características que permiten dejar atrás Flash y comenzar a tener nuevas opciones a la hora de crear animaciones para móviles.

En cuanto a su funcionamiento no es demasiado complejo. Podremos definir un nombre para la animación (animation-name), un tiempo de espera (animation-delay), un tiempo de duración (animation-duration), la cantidad de veces que se realizará (animation-iteration-count) y también el conjunto de reglas que se aplicarán para crear el efecto animado.

La compatibilidad aún es un tema complejo para esta característica. Internet Explorer no ofrece compatibilidad con esta regla y en el caso de otros navegadores deberemos utilizar un prefijo: Chrome y Safari (-webkit), Opera (-o) y Firefox (-moz).

A continuación veremos un ejemplo donde cambiaremos el ancho a un elemento:


@keyframes animar
{
from {width: 100px;}
to {width: 200px;}
}

@-moz-keyframes animar
{
from {width: 100px;}
to {width: 200px;}
}

 

@-webkit-keyframes animar
{
from {width: 100px;}
to {width: 200px;}
}

 

@-o-keyframes animar

{
from {width: 100px;}
to {width: 200px;}
}

El nombre de la animación (en este caso animar) se puede cambiar por el que deseemos. También es posible modificar o agregar otras propiedades para animar. Cabe mencionar que también deberemos crear una regla para el elemento que deseemos animar (por ejemplo un div), asignando el nombre de la animación y el tiempo que tardará en realizarla (entre otros parámetros posible). Veamos a continuación:


div
{
animation: animar 5s;
-moz-animation: animar 5s;
-webkit-animation: animar 5s;
-o-animation: animar 5s;
}

Para saber más sobre el tema podemos leer la información que nos ofrece el W3C en el documento CSS Animations.

 

¿Te interesa aprender más sobre como integrar HTML5 y CSS3 en tus sitios Web? Puedes escribirnos.

Autor: Damián

Escribió cuatro libros, relacionados con sistemas operativos, hardware y desarrollo web, entre ellos se destaca Webmaster Profesional (editado en el año 2009) y HTML 5 – Entienda el cambio, aproveche su potencial lanzado en el 2011 en formato papel y en el 2012 en versión ebook. Se ha desempeñado como editor de libros relacionados con informática. Ha realizado trabajos de edición en la revista Users Digital Design, para la cual participa también escribiendo notas sobre diseño y desarrollo web. Ha colaborado como autor en la revista Dr. Max, Phone Users y en diversas colecciones de fascículos (Universo PC y 1000 Ideas PC, entre otras). Escribe contenidos para diversos medios online, incluyendo el sitio RedUSERS.com. Es consultor y especialista en desarrollo web, con amplio conocimiento en HTML, CSS, AJAX, PHP y Bases de datos. En la actualidad se destaca su trabajo en la preparación de contenidos relacionados con CSS3 y HTML5. Es profesor y dicta curso de HTML5 y clases en la Carrera de Programador Web en el Instituto IT Master Professional Training, en Buenos Aires (Argentina).

2 Comentarios

  1. Hola Damian, cordial saludo
    he leido tus articulos publicados, y estoy interesado en saber si tu libro
    se comercializa aqui en colombia tambien, pues la verdad me gustaria adquirirlo
    y aprender un poco mas sobre desarrollo Web

    Muchas Gracias
    Hulber

Deja un comentario

Es requirido que se compelte.*.