Keyframer, una aplicación web para crear animaciones CSS3

Con CSS3 se introducen las animaciones por medio de fotogramas, lo que indica un avance en la forma de hacer animaciones en tiempos de intervalos; algo como lo que hace Flash. Sin embargo aunque parezca extraño es un tanto difícil controlar este tipo de característica, porque se tiene que declarar un nombre para la animación, añadirla a un elemento, y después especificar por medio de porcentajes las acciones que van a pasar.

Por eso les presento Keyframer, una aplicación web que simula una línea de tiempo que podemos usar para añadir fotogramas y poder configurar nuestras animaciones de forma mucho más visual. La interfaz es tan sencilla que no necesitamos otra cosa que saber qué es lo que queremos animar.

Toda la intefaz es muy intuitiva. En la pantalla tenemos un círculo, sin embargo podemos modificar las propiedades base para empezar a animar a partir de ahí. Ahora, tenemos una línea del tiempo y podemos añadir fotogramas para que después podamos añadir las propiedades que queremos que se animen. Automáticamente las animaciones se van a actualizar, y podemos añadir hasta 100 fotogramas, dado que todo se maneja en porcentajes cerrados.

Por último para ver el código final damos clic en el ícono de círculo para copiarlo y analizarlo si no estamos tan acostumbrados a ver este tipo de código para crear animaciones complejas en CSS3.

Sitio web Keyframer