15 librerie di animazioni CSS da conoscere assolutamente

Il passaggio da una configurazione di stile CSS a un’altra può essere animato con le animazioni CSS. Un’animazione CSS è fatta di uno stile che la descrive e di una serie di keyframe che indicano gli stati iniziale e finale dello stile, oltre agli eventuali punti di passaggio intermedi.

Le animazioni CSS offrono tre vantaggi importanti rispetto alle tecniche di animazione tradizionali basate su script:

1. Sono semplici da usare per le animazioni semplici, non serve nemmeno conoscere JavaScript per realizzarle.
2. Anche con un carico di sistema medio le animazioni girano bene. In JavaScript le animazioni semplici spesso rendono male. Per tenere le prestazioni il più fluide possibile, il motore di rendering può ricorrere al salto di frame e ad altri accorgimenti.
3. Lasciare al browser il controllo della sequenza di animazione gli permette di migliorare prestazioni ed efficienza, per esempio limitando la frequenza di aggiornamento delle animazioni nelle schede che al momento non sono visibili.

Anche se la maggior parte delle animazioni si può realizzare in CSS puro, con librerie e framework di animazione ottieni animazioni migliori in meno tempo.

1️⃣ Animate.css – Animazioni CSS di Daniel Eden

2️⃣ Anime.js – Anime.js è una libreria di animazione JavaScript leggera, con un’API semplice ma potente. Funziona con le proprietà CSS, gli SVG, gli attributi del DOM e gli oggetti JavaScript.

3️⃣ CSShake – CSShake fa esattamente quello che promette – una libreria CSS pensata apposta per far tremare gli elementi della tua pagina web.

4️⃣ Hover.css – Hover.css è una libreria di animazioni CSS pensata per i pulsanti e gli altri elementi di interfaccia del tuo sito web.

5️⃣ AniJS – AniJS è una libreria di animazioni che ti permette di aggiungere animazioni agli elementi con una sintassi semplice, vicina a una frase.

6️⃣ Animista – Animazioni CSS su richiesta

7️⃣ Tachyons-animate – Tachyons è una libreria CSS atomica con una montagna di classi di utilità che permettono di costruire qualsiasi cosa aggiungendo solo le classi che ti servono.

8️⃣ Sequence.js – Sequence.js è una libreria JavaScript che offre un framework CSS responsive per creare slider, presentazioni, banner e altre applicazioni a step.

9️⃣ Infinite – Queste animazioni, come le rotazioni e le pulsazioni, sono pensate apposta per girare e ripetersi all’infinito.

🔟 OBNOXIOUS.CSS – Animazioni per i cuori forti e le menti deboli

1️⃣1️⃣ MOTION UI – Una libreria Sass per creare transizioni e animazioni CSS flessibili.

1️⃣2️⃣ Keyframes.app – Un’interfaccia grafica per generare animazioni CSS personalizzate a keyframe.

1️⃣3️⃣ AnimXYZ – AnimXYZ ti aiuta a creare, personalizzare e comporre le animazioni del tuo sito web. Pensato per Vue, React, SCSS e CSS.

1️⃣4️⃣ Whirl – Animazioni di caricamento in CSS con il minimo sforzo!

1️⃣5️⃣ Hamburgers – Hamburgers è una raccolta di gustose icone hamburger animate in CSS. Il sorgente è incluso anche come libreria Sass. È modulare e personalizzabile: prepara il tuo hamburger.