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 vuoi ottenere.

Riepilogo

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

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 devi assumere 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 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 il TweenMax di GreenSock, potresti trovare più pratico nel complesso mantenerlo per le animazioni.

Creare animazioni con CSS

L'animazione con CSS è il modo più semplice per far muovere qualcosa sullo schermo. Questo approccio viene descritto come dichiarativo, perché è l'utente a specificare che cosa deve accadere.

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 sulle animazioni con decelerazione, consulta la guida Nozioni di base sulle animazioni con decelerazione.

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 la gestione delle 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 usare anche le animazioni CSS, che ti consentono di avere un maggiore controllo su fotogrammi chiave, durate e iterazioni delle singole animazioni.

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 all'interno di 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 totale controllo 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 preferisci. Ciò è particolarmente utile se stai creando applicazioni complesse orientate agli oggetti, perché ti consente di immortalare correttamente il tuo comportamento.