Confronto tra animazioni CSS e JavaScript

Puoi creare animazioni 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 dai tipi di effetti che stai cercando di ottenere.

Riepilogo

• Utilizza le animazioni CSS per transizioni "una tantum" più semplici, ad esempio l'attivazione/disattivazione degli stati degli elementi dell'interfaccia utente.
• Utilizza le animazioni JavaScript quando vuoi avere effetti avanzati come rimbalzo, interruzione, messa in pausa, riavvolgimento o rallentamento.
• Se scegli di creare animazioni 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 il livello di impegno e di tempo richiesto è diverso (vedi anche Rendimento di CSS e JavaScript). Ognuno ha i suoi pro e contro, ma queste sono buone linee guida:

• Utilizza CSS quando hai stati più piccoli e indipendenti per gli elementi dell'interfaccia utente. Le transizioni e le animazioni CSS sono ideali per mostrare un menu di navigazione dal lato o una descrizione comando. Potresti finire per utilizzare JavaScript per controllare gli stati, ma le animazioni stesse saranno nel CSS.
• Utilizza JavaScript quando hai bisogno di un controllo significativo sulle animazioni. L'API Web Animations è l'approccio basato su standard, disponibile oggi nella maggior parte dei browser moderni. In questo modo vengono forniti oggetti reali, ideali per applicazioni complesse orientate agli oggetti. JavaScript è utile anche quando devi interrompere, mettere in pausa, rallentare o invertire le animazioni.
• Utilizza direttamente requestAnimationFrame quando vuoi orchestrare un'intera scena manualmente. Si tratta di un approccio JavaScript avanzato, ma può essere utile se stai creando un gioco o disegnando in 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, potresti trovare più pratico continuare a utilizzarlo per le animazioni.

Creare animazioni con CSS

L'animazione con CSS è il modo più semplice per far muovere qualcosa sullo schermo. Questo approccio è descritto come declarativo, perché specifichi cosa vuoi che accada.

Di seguito è riportato del codice CSS che sposta un elemento 100px sia sull'asse X che su quello Y. Questo viene fatto utilizzando una transizione CSS impostata su 500ms. Quando viene aggiunta la classe move, il valore transform viene modificato e inizia la transizione.

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

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

Prova

Oltre alla durata della transizione, sono disponibili opzioni per l'easing, ovvero la sensazione che dà l'animazione. Per ulteriori informazioni sull'attenuazione, consulta la guida Nozioni di base sull'attenuazione.

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

box.classList.add('move');

In questo modo, le tue app avranno un buon equilibrio. Puoi concentrarti sulla gestione dello stato con JavaScript e impostare semplicemente le classi appropriate sugli elementi target, lasciando al browser il compito di gestire le animazioni. Se scegli questa strada, puoi ascoltare gli eventi transitionend nell'elemento, ma solo se puoi rinunciare al supporto delle 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 rilevare la fine di una transizione è il seguente:

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

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

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

Ad esempio, puoi animare la casella nello stesso modo con le transizioni, ma senza interazioni dell'utente come i clic e con ripetizioni infinite. 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 utilizzi la proprietà animation-name per scegliere l'animazione richiesta.

Se vuoi che le animazioni CSS funzionino sui browser meno recenti, devi 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.

Creare animazioni con JavaScript e l'API Web Animations

La creazione di animazioni con JavaScript è, in confronto, più complessa della scrittura di transizioni o animazioni CSS, ma in genere offre agli sviluppatori una potenza molto maggiore. Puoi utilizzare l'API Web Animations per animare proprietà CSS specifiche o creare oggetti effetto componibili.

Le animazioni JavaScript sono imperative, in quanto le scrivi in linea all'interno del codice. Puoi anche incapsularli in altri oggetti. Di seguito è riportato il codice JavaScript che devi scrivere 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 nel nostro esempio.

Prova

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

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