Cómo animar con CSS3 usando sprites y Javascript
Las animaciones CSS3 son un gran recurso para los diseñadores, como vimos en nuestro artículo anterior. Resultan más que adecuadas a los tiempos que corren: son accesibles, basadas en estándares y rápidas de cargar, no requieren usar ningún complemento en el navegador, más allá del HTML común y el CSS. En este artículo, queremos mostrar de forma práctica cómo trabajar con sprites CSS y animarlos en un bucle infinito. Luego, implementaremos unos controles rápidos Javascript para parar y reanudar la animación para que puedas implementarlos a la hora de crear tu web.
HTML
El HTML que tenemos incluye poca cosa, como verás, ya que la mayor parte del trabajo lo tendremos en la declaración de estilos más adelante. Simplemente, tenemos una división, que es la capa sobre la que vamos a realizar la animación, junto con dos botones que usaremos más adelante para los controles de parar y continuar la secuencia.
<div id='sprites'></div> <button href='#' class='accion' onclick='parar()'>Parar</button> <button href='#' class='accion' onclick='continuar()'>Continuar</button>
Sobre la división con id=»sprites» vamos a aplicar las animaciones, basándonos en una imagen de fondo.
Imagen
Vamos a usar una imagen que es la que tiene los sprites con los fotogramas de nuestra animación. Esa imagen la puedes crear con cualquier editor gráfico, con la secuencia de fotogramas que quieres animar. Ten en cuenta que nosotros estamos usando en este ejercicio la técnica de sprites, pero existen muchas otras técnicas para la animación con CSS3.
Esta es la imágen que hemos creado:
CSS
Ahora, observemos el CSS. Seguro que querrás prestar una atención especial en el punto donde se define la animación CSS3. Tiene dos partes. Por un lado, la definición de los fotogramas clave, en la que se va animar la propiedad background-position y, por otro, la declaración de la animación en el elemento
@keyframes smile{
from{
background-position: 0px;
}
to{
background-position: -900px;
}
}
@-webkit-keyframes smile{
from{
background-position: 0px;
}
to{
background-position: -900px;
}
}
#sprites{
width: 300px;
height: 200px;
background-image: url('sprites.jpg');
animation: smile 1s steps(3, end) infinite;
-webkit-animation: smile 1s steps(3, end) infinite;
}
Ten en cuenta que las animaciones CSS todavía es son bastante novedosas y, por lo tanto, hay que usar prefijos de CSS para cada navegador. Si usas un preprocesador u otra librería como Autoprefixer no tendría que representar más trabajo para ti.
Javascript
Ahora, veremos cómo alterar las propiedades de la animación con Javascript nativo. En realidad, es muy sencillo, aunque volvemos a tener el problema de la compatibilidad. Insistiemos en qye estas características aún son nuevas y para verlas en funcionamiento estamos obligados a usar prefijos para cada navegador. Además, es posible que en navegadores anticuados, como Internet Explorer 8, no funcionen en ningún caso, incluso usando los prefijos adecuados a los navegadores de Microsoft.
Como viste en el HTML, teníamos dos botones, para iniciar o para la aplicación. Sus manejadores de eventos onclick eran llamadas a dos funciones cuyo código puedes ver a continuación.
function parar(){
var el = document.getElementById('sprites');
el.style.webkitAnimationPlayState = 'paused';
el.style.AnimationPlayState = 'paused';
el.style.MozAnimationPlayState = 'paused';
el.style.MsAnimationPlayState = 'paused';
}
function continuar(){
var el = document.getElementById('sprites');
el.style.webkitAnimationPlayState = 'running';
el.style.AnimationPlayState = 'running';
el.style.MozAnimationPlayState = 'running';
el.style.MsAnimationPlayState = 'running';
}
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.