Animazioni CSS per dispositivi mobile con JavaScript

Molti sviluppatori sottovalutano le potenzialità delle animazioni CSS nello sviluppo per dispositivi mobile. Le animazioni CSS sono più veloci e fluide delle tradizionali animazioni JavaScript in quanto sono implementate nel linguaggio nativo del browser. Vediamo una semplice implementazione con JavaScript.

Per prima cosa definiamo una semplice animazione che cambia il colore di sfondo di un elemento. La chiameremo semplicemente my:

@-moz-keyframes my /* Firefox */
{
from {background-color: #ff9;}
to {background-color: #000;}
}

@-webkit-keyframes my /* Safari and Chrome */
{
from {background-color: #ff9;}
to {background-color: #000;}
}

@-o-keyframes my /* Opera */
{
from {background-color: #ff9;}
to {background-color: #000;}
}
@keyframes my
{
from {background-color: #ff9;}
to {background-color: #000;}
}

.animate {
	-moz-animation: my 1s; /* Firefox */
	-webkit-animation: my 1s; /* Safari and Chrome */
	-o-animation: my 1s; /* Opera */
	animation: my 1s;
}

Il passo seguente consiste nell'aggiungere la classe animate ai nostri elementi in modo da creare un effetto dinamico e ripetuto. Useremo un timer JavaScript che avrà la stessa durata dell'animazione CSS, ossia 1 secondo:

document.addEventListener('DOMContentLoaded', function() {
	var boxes = document.querySelectorAll('div.box'),
		length = boxes.length,
		index = -1;
	var animate = function(element) {
	    var $cls = element.className;
		element.className = $cls + ' animate';
		var parent = element.parentNode;
		var children = parent.getElementsByTagName('div');
		for(var i = 0; i < children.length; i++) {
			var child = children[i];
			if(child !== element) {
				var cls = child.className;
				child.className = cls.replace('animate', '');
			}
		}
	};
	
	setInterval(function() {
		index++;
		if(index == length) {
			index = -1;
		}
		
		var box = boxes[index];
		animate(box);
	
	}, 1000);

}, false);

Potete visionare il risultato finale nel seguente video.