Confronto tra animazioni CSS e JavaScript

L'animazione può essere eseguita con CSS o JavaScript. Quale dovresti utilizzare e perché?

Paul Lewis

Sam Thorogood

Esistono due modi principali per creare animazioni sul web: con CSS e con JavaScript. La scelta dipende dalle altre dipendenze del progetto e dal tipo di effetti che vuoi ottenere.

Riepilogo

• Utilizza le animazioni CSS per transizioni "one-shot" più semplici, come l'attivazione/disattivazione degli stati degli elementi UI.
• Utilizza le animazioni JavaScript quando vuoi avere effetti avanzati come rimbalzo, interruzione, pausa, riavvolgimento o rallentamento.
• Se scegli di animare con JavaScript, utilizza l'API Web Animations o un framework moderno con cui hai dimestichezza.

La maggior parte delle animazioni di base può essere creata con CSS o JavaScript, ma la quantità di impegno e il tempo variano (vedi anche Prestazioni CSS e JavaScript). Ognuno ha i suoi pro e i suoi contro, ma queste sono buone linee guida:

• Utilizza CSS quando hai stati indipendenti più piccoli per gli elementi dell'interfaccia utente. Le transizioni e le animazioni CSS sono ideali per visualizzare un menu di navigazione laterale o per mostrare una descrizione comando. Potresti utilizzare JavaScript per controllare gli stati, ma le animazioni stesse saranno presenti nel tuo CSS.
• Utilizza JavaScript quando hai bisogno di un controllo significativo sulle animazioni. L'API Web Animations è l'approccio basato su standard, attualmente disponibile nella maggior parte dei browser moderni. In questo modo si creano oggetti reali, ideali per applicazioni complesse orientate agli oggetti. JavaScript è utile anche quando devi interrompere, mettere in pausa, rallentare o invertire le animazioni.
• Usa requestAnimationFrame direttamente quando vuoi orchestrare manualmente un'intera scena. Si tratta di un approccio JavaScript avanzato, ma può essere utile se stai sviluppando un gioco o disegnando su una tela HTML.

In alternativa, se utilizzi già un framework JavaScript che include funzionalità di animazione, ad esempio tramite il metodo .animate() di jQuery o TweenMax di GreenSock, nel complesso potrebbe essere più pratico attenersi a questo metodo per le animazioni.

Crea animazioni con CSS

Creare animazioni con CSS è il modo più semplice per far muovere qualcosa sullo schermo. Questo approccio è descritto come dichiarativo, perché sei tu a specificare cosa deve accadere.

Di seguito trovi alcuni CSS che spostano un elemento 100px su entrambi gli assi X e Y. Viene fatto utilizzando una transizione CSS impostata per richiedere 500ms. Quando viene aggiunta la classe move, il valore transform cambia e inizia la transizione.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Prova

Oltre alla durata della transizione, ci sono opzioni per l'easing, che è essenzialmente l'aspetto dell'animazione. Per ulteriori informazioni sull'easing, consulta la guida The Basics of Easing (Nozioni di base sull'easing).

Se, come nello snippet precedente, crei classi CSS separate per gestire le animazioni, puoi utilizzare JavaScript per attivare e disattivare ogni animazione:

box.classList.add('move');

In questo modo avrai un buon equilibrio per le tue app. Puoi concentrarti sulla gestione dello stato con JavaScript e impostare semplicemente le classi appropriate sugli elementi target, lasciando il browser a gestire le animazioni. Se segui questa procedura, puoi rimanere in ascolto degli eventi transitionend relativi all'elemento, ma solo se puoi rinunciare al supporto per le versioni precedenti di Internet Explorer. La versione 10 è stata la prima a supportare questi eventi. Tutti gli altri browser supportano l'evento da un po' di tempo.

Il codice JavaScript necessario per rimanere in ascolto della fine di una transizione ha il seguente aspetto:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

Oltre a utilizzare le transizioni CSS, puoi utilizzare anche le animazioni CSS, che ti consentono di avere un controllo maggiore sui singoli fotogrammi chiave, durate e iterazioni dell'animazione.

Ad esempio, puoi animare il riquadro nello stesso modo con le transizioni, ma senza interazioni da parte dell'utente, come i clic, e con infinite ripetizioni. Puoi anche modificare più proprietà contemporaneamente.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

Prova

Con le animazioni CSS definisci l'animazione stessa indipendentemente dall'elemento target e utilizza la proprietà animation-name per scegliere l'animazione richiesta.

Se vuoi che le tue animazioni CSS funzionino sui browser meno recenti, dovrai aggiungere i prefissi dei fornitori. Molti strumenti possono aiutarti a creare le versioni con prefisso del CSS di cui hai bisogno, consentendoti di scrivere la versione senza prefisso nei file di origine.

Crea animazioni con JavaScript e l'API Web Animations

Al contrario, creare animazioni con JavaScript è più complesso rispetto alla scrittura di transizioni o animazioni CSS, ma in genere offre agli sviluppatori una potenza notevolmente maggiore. Puoi utilizzare l'API Web Animations per animare proprietà CSS specifiche o creare oggetti con effetti componibili.

Le animazioni JavaScript sono imperative poiché le scrivi in linea come parte del codice. Puoi anche incapsularli all'interno di altri oggetti. Di seguito è riportato il codice JavaScript necessario per ricreare la transizione CSS descritta in precedenza:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

Per impostazione predefinita, le animazioni web modificano solo la presentazione di un elemento. Se vuoi che l'oggetto rimanga nella posizione in cui è stato spostato, devi modificare gli stili sottostanti al termine dell'animazione, come mostrato nel nostro esempio.

Prova

L'API Web Animations è uno standard relativamente nuovo di W3C. È supportato in modo nativo nella maggior parte dei browser moderni. Per i browser moderni che non supportano, è disponibile un polyfill.

Con le animazioni JavaScript, hai il controllo totale degli stili di un elemento in ogni passaggio. Ciò significa che puoi rallentare le animazioni, metterle in pausa, interromperle, invertirle e manipolare gli elementi come ritieni opportuno. Ciò è particolarmente utile se stai creando applicazioni complesse orientate agli oggetti, perché puoi incapsulare correttamente il tuo comportamento.