Animaciones con CSS vs Animaciones con JS
Cuando hacemos nuestra página web es posible definir animaciones para los elementos HTML usando animaciones con CSS o animaciones con Javascript, teniendo sus ventajas y desventajas cada una, dependerá de nuestras necesidades cuál de estas usaremos.
Animaciones con CSS
Se pueden hacer animaciones sencillas haciendo uso únicamente de CSS. Para lograr esto se hace uso de la propiedad animation y sus sub-propiedades. Con esto solo se define duración, frecuencia, dirección, entre otras cosas, pero no definen como se ve la animación, para eso se usa @keyframes, con esto se definen las reglas para los fotogramas de la animación.
Subpropiedades de animation
Algunas de las subpropiedades de animation son:
- animation-name: define el nombre de la regla @keyframes a usar.
- animation-duration: indica la duración, en segundos, de la animación.
- animation-iteration-count: indica cuantas veces se va a repetir la animación, puede tener el valor de un entero o infinite para iteraciones infinitas.
- animation-direction : indica la dirección de la animación, puede tener el valor de normal (inicio a fin), reverse (fin a inicio), alternate (alternará el sentido de la animación en la iteraciones), alternate-reverse (combinación de alternate y reverse).
|
1 2 3 4 5 6 |
button { animation-name: deslizamiento; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: normal; } |
Definir las reglas para los fotogramas
Una vez configurada la animación se debe de definir cómo será la animación. Esto se define dentro de la regla @keyframes. Dentro de esta regla se definen las reglas para cada momento de la animación. Por medio de porcentaje se define el momento de la animación en el cual se aplicará el estilo definido.
|
1 2 3 4 5 6 7 8 9 10 11 |
@keyframes deslizamiento { 0% { /* Reglas para el momento*/ } 25% { /*Reglas para el momento*/ } 100% { /* Reglas para el momento*/ } } |
Para que el navegador pueda conocer el inicio y el fin de la animación, se debe de especificar mínimo dos momentos, 0% (momento inicial) y 100% (momento final). Estos dos momentos tienen alias especiales, from y to , respectivamente.
No es necesario definir las reglas para cada momento de la animación, el navegador se encargará de realizar las transiciones, y optimizaciones, entre momentos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
button { animation-name: deslizamiento; animation-duration: 4s; animation-iteration-count: infinite; animation-direction: normal; } @keyframes deslizamiento { 0% { margin-left: 100%; background-color: blue; } 50% { background-color: green; } 100% { margin-left: 0%; background-color: yellow; } } |
Puedes ver el ejemplo en acción aquí.
Animaciones con Javascript
En la actualidad al hacer animaciones con Javascript se utiliza el método requestAnimationFrame(). Esta es una manera eficiente de realizar una animación. La manera en la que funciona es que ejecutará el código de la animación la siguiente vez que la página se vuelva a dibujar. Cuando llamamos varias veces a requestAnimationFrame() nos aseguramos que la computadora del usuario está lista para hacer los cambios. Además, las animaciones realizadas de esta manera se detendrán o alentarán cuando la página esté en una pestaña inactiva.
Como usar requestAnimationFrame()
Su sintaxis es bastante sencilla:
|
1 |
requestAnimationFrame(callback); |
La función callback es la función que contiene el código de nuestra animación. De manera automática se le manda a nuestra función callback un timestamp para indicar el momento en el que requestAnimationFrame() fue llamado.
requestAnimationFrame()retorna un entero mayor a cero con el cual podemos cancelar su llamada usando cancelAnimationFrame().
|
1 2 3 4 5 6 7 |
var botonAnimado = document.getElementById('myButton'); var posIzq = 0; requestAnimationFrame(function(timestamp){ posIzq += 5; botonAnimado.style.marginLeft = posIzq + 'px'; }); |
Con el código anterior logramos que nuestro botón se mueva 5 pixeles, pero esto no es una animación como tal.
Animando con requestAnimationFrame()
Para lograr que sea una animación tenemos que hacer que nuestro código de la animación se repita varias veces, para esto llamamos de manera “recursiva” a requestAnimationFrame() en nuestro callback.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
var botonAnimado = document.getElementById('myButton'); var posIzq = 0; var flag = true; function moverBoton (timestamp){ var timestamp = new Date().getTime() if(flag){ posIzq += 10; } else { posIzq -= 10; } if(posIzq == 1500 ){ flag = false; } else if(posIzq == 0) { flag = true; } botonAnimado.style.marginLeft = posIzq + 'px'; requestAnimationFrame(moverBoton); }; requestAnimationFrame(moverBoton); |
Se puede ver el ejemplo anterior en acción aquí.
Conclusión
Realizar animaciones con CSS y animaciones con Javascript es sencillo. En cuanto a simplicidad de código CSS3 resulta victorioso, ya que realizar el efecto de un elemento yendo de un lado a otro es muy simple a diferencia de Javascript que requiere mayor lógica. Por el otro lado, Javascript permite realizar animaciones más complejas, por ejemplo, usando los eventos en nuestra página.
Dependerá de las animaciones que queramos hacer la técnica que usaremos.
