Minientrada

ANIMACIONES CSS… SIN USAR CSS

< script src=”my own” title=”animaciones css sin usar css”>

Yo y mis títulos “controversiales” :mrgreen:

En realidad no lo es tanto, ya que en HTML5 tenemos el tag <canvas> que permite toda una gama de cosas que con la versión anterior de HTML no era posible, un ejemplo de ello son las animaciones gráficas sin usar CSS3. Ahora bien, mi punto acá no es discutir respecto a si es la mejor forma de realizar animaciones, solo probar que es posible usando solo Javascript.

Para hacer esto aún más sencillo, tenemos la librería Move.js la cual se encarga de realizar por nosotros lo que haríamos con CSS3 convencional, o bien usando @keyframes, o bien usando SASS u otro pre-procesador de CSS3. El uso de la librería es bastante sencillo, usando un patrón fluent, concatena funciones para realizar la animación. En este caso, vamos a crear un “page loader” que rote en la pantalla.

Un loader sencillo

Un loader sencillo ^^’

Usando Move.js solo tenemos que escribir unas pocas líneas, mientras que con @keyframes …, pues la historia es otra. Acá pueden ver los resultados y darse una idea de lo que estoy diciendo XD .

Descomenten el CSS y comenten el JS, o jueguen como quieran 😀

Tal vez, la desventaja más notoria de Move.js es no permitir animaciones “infinitas”, muy útil para este tipo de casos en los que necesitamos realizar una animación cíclica, pero para animaciones más complejas, el CSS puro, se vuelve claramente una desventaja por si solo.

¡A moverse! 😉

</script>

Anuncios