Si ha creado varias animaciones usando solo CSS, es probable que haya notado un pequeño parpadeo que ocurre cuando se anima cierto elemento, incluso puede que uses algún método ó hack para evitar esto. Relajate, los hacks ya no son necesarios, ya que existe una nueva propiedad CSS para ayudar a lidiar las pesadas animaciones y transiciones.

¿Por Qué Ocurre El Parpadeo?

Cuando se ejecuta una animación, la animación se realiza utilizando el motor de procesamiento de software del navegador que suele ser mucho más lento que la GPU (Graphics Processing Unit) de las computadoras.

Es por eso que a veces, incluso si se puede jugar los mejores juegos de su equipo, se le nota algo de parpadeo al visualizar páginas web animadas solo con CSS. El problema también varía entre navegadores, ya que en algunos puede ser mas visible el parpadeo en comparación a otros navegadores web.

Compatibilidad De Navegadores Para La Propiedad will-change

En el momento de escribir este articulo, sólo las versiones en desarrollo de Chrome, Opera y Firefox admiten esta propiedad, pero como podemos ver por el número de navegadores betas que dan soporte a la propiedad, probablemente no pasará mucho tiempo hasta que veamos el soporte en las versiones estables de los navegadores web.

La Propiedad will-change De CSS

Esta nueva propiedad le permite notificar al navegador, para que pueda optimizar la animación o transformación. Esto hace que el parpadeo desaparezca y la página muestre movimientos mas suaves y agradables a la vista del usuario. Esto también permitirá hacerle entender al navegador sobre los recursos necesarios para la animación ó transformación, ademas de la creación de las capas que necesite por si necesita una animación en 3D,  y como se menciono antes, mostrar una animación ó transformación mas fluida para el usuario.

Supongamos que deseamos rotar un objeto en 3D al pasar el puntero del mouse encima del elemento. Antes de que el elemento está animado, se debe añadir lo siguiente:

[css]will-change: transform; [/css]

Por supuesto, si está pensando en cambiar más de una propiedad CSS también puede agregar más separándolas con comas, justo así:

[css]will-change: transform, top;[/css]

Esto, por supuesto, debe ser usado con precaución para asegurarse de que el navegador no optimizar los recursos donde no sea necesario. Por ejemplo, nunca se debe usar algo como esto:

[css]<br /><br />* {<br /> will-change: all;<br />}<br /><br />[/css]

Los Posibles Valores

Con esta propiedad es posible usarla con los siguiente valores:

• Auto – esto simplemente indica al navegador que no cambiar nada y que debe seguir optimizando como lo hace normalmente.
• scroll-position – este valor indica que el elemento de destino cambiará su posición de desplazamiento.
• contents – al agregar este valor usted está dejando el navegador sabe que el contenido de ese elemento va a cambiar en el futuro.
• x – Este valor puede ser el nombre de una o más propiedades que se pueden esperar al cambio de este elemento, como la propiedad opacity o transform.

Finalmente

CSS3 introduced a lot of cool effects, but it didn’t take account of the hardware limitations that we live with. The will-change property is a great step towards correcting that mistake.