L'animazione può essere eseguita con CSS o JavaScript. Quale dovresti usare e perché?
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
- Utilizzare animazioni CSS per creare "one-shot" più semplici transizioni, 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 la quantità di impegno e tempo varia (vedi anche Rendimento di CSS e JavaScript). Ciascuno di loro ha i suoi pro e i suoi contro, ma queste sono buone linee guida:
- Usa CSS quando hai stati autonomi più piccoli per gli elementi UI. Le transizioni e le animazioni CSS sono ideali per spostare un menu di navigazione laterale o mostrare una descrizione comando. Potresti finire per utilizzare JavaScript per controllare gli stati, ma le animazioni stesse saranno nel tuo 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. Fornisce oggetti reali, ideali per applicazioni complesse orientate agli oggetti. JavaScript è utile anche quando devi interrompere, mettere in pausa, rallentare o invertire le animazioni.
- Usa
requestAnimationFramedirettamente quando vuoi orchestrare un'intera scena manualmente. Si tratta di un approccio JavaScript avanzato, ma può essere utile se stai creando un gioco o stai disegnando su un canvas 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 nel complesso mantenerlo per le animazioni.
Creazione di animazioni con CSS
L'animazione con CSS è il modo più semplice per far spostare qualcosa sullo schermo. Questo approccio viene descritto come dichiarativo, perché è l'utente a specificare che cosa deve accadere.
Di seguito sono riportati alcuni CSS che spostano un elemento 100px su entrambi gli assi X e Y. Questa operazione viene eseguita utilizzando una transizione CSS impostata per richiedere 500ms. Quando viene aggiunta la classe move, il valore transform viene modificato e la transizione inizia.
.box {
transform: translate(0, 0);
transition: transform 500ms;
}
.box.move {
transform: translate(100px, 100px);
}
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 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 ciascuna 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 di destinazione, lasciando il browser per gestire le animazioni. Se scegli questo percorso, puoi ascoltare gli eventi transitionend sull'elemento, ma solo se sei in grado di 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 ascoltare la 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 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 il riquadro nello stesso modo con le transizioni, ma senza che l'utente interagisca con clic, ma 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;
}
}
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 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 tuoi file di origine.
Creare animazioni con JavaScript e l'API Web Animations
Creare animazioni con JavaScript è, in confronto, più complessa rispetto alla scrittura di transizioni o animazioni CSS, ma in genere offre agli sviluppatori molto più potenza. Puoi utilizzare l'API Web Animations per animare proprietà CSS specifiche o creare oggetti con effetti componibili.
Le animazioni JavaScript sono imperative, perché vengono scritte in linea come parte del codice. Puoi anche incapsularli all'interno di altri oggetti. Di seguito è riportato il codice JavaScript che dovresti 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 resti nella posizione in cui è stato spostato, devi modificare gli stili sottostanti al termine dell'animazione, come da esempio.
L'API Web Animations è uno standard relativamente nuovo di W3C. È supportata 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 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 ritieni opportuno. Ciò è particolarmente utile se stai creando applicazioni complesse orientate agli oggetti, perché ti consente di immortalare correttamente il tuo comportamento.