Trucchi sulle animazioni CSS

Per creare animazioni con il minor numero possibile di elementi ho trovato alcuni trucchi con i CSS che forse non sapete di poter fare.
Trucchi sulle animazioni CSS

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More

Mi sono imbattuto nell’abitudine di creare animazioni CSS nel mio tempo libero, prendendo ispirazione dalle cose che incontro durante il giorno. Per creare animazioni con il minor numero possibile di elementi ho trovato alcuni trucchi con i CSS che forse non sapete di poter fare. Mi piacerebbe condividerli con voi.

#1) Passa ad un altro stato di animazione intermedia

Le animazioni CSS rendono più semplice la transizione di un valore durante il periodo di tempo. Hanno anche la capacità di passare ad un nuovo valore pressochè istantaneamente. Il trucco è quello di utilizzare due fotogrammi chiave con una differenza molto piccola, intorno allo .001% funzione bene.

@keyframes toggleOpacity {
  50% { opacity: 1; } 
  50.001% { opacity: 0.4; }

  /* periodo di pausa */

  52.999% { opacity: 0.4; }
  53% { opacity: 1; }
}

Il seguente è un esempio che imita un luce a intermittenza tipica dei cartelloni.
See the Pen No Vacancy 404 CSS Only by Zach Saucier (@Zeaklous) on CodePen.

#2) Ritardi negativi di animazione

Una cosa positiva di animation delay è quando l’animazione attende un certo periodo di tempo prima di iniziare. Un’animazione con ritardo negativo inizia immediatamente, come se quella quantità di tempo fosse già passata. In altre parole, avvia un’animazione in uno stato avanzato nel ciclo di animazione. Questo permette alle animazioni di essere riutilizzate in diversi elementi, tutto ciò che deve cambiare è solo la tempistica.

Ecco un esempio, ogni cerchio inizia immediatamente in uno stato diverso del ciclo di animazione.

See the Pen Circle Snake by Zach Saucier (@Zeaklous) on CodePen.

#3) Animazioni Proporzionali

Cerco di rendere responsive tutto ciò che progetto, incluse le animazioni. Ma non è possibile con tutte quelle che ho creato, a volte è possibile usando le percentuali ed i valori relativi.

In molte delle mie animazioni, uso elementi come cerchi e quadrati che necesitano di larghezza e altezza proporzionali. Sono in grado di crearli utilizzando una larghezza in percentuale, l’altezza pari a zero e il padding in percentuale. Il padding bottom è il trucco per tenerlo proporzionale alla larghezza, in questo modo:

.container {
  position: relative;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

Si può vedere tutto in pratica nel seguente esempio cambiando la dimensione della finestra. La demo si avvale anche di ritardi di animazione negativi.

See the Pen Responsive CSS bars by Zach Saucier (@Zeaklous) on CodePen.


#4) Modifica transform-origin durante l’animazione

Mentre lavoravo sulle mie animazioni, sono rimasto sorpreso non solo sul fatto che transform-origin può essere cambiato a metà animazione.
Nell’esempio riportato di seguito creo un’animazione usando rotazioni su assi differenti invece di usare quattro animazioni separate.

See the Pen Change transformation-origin mid animation by Zach Saucier (@Zeaklous) on CodePen.

L’aspetto negativo di questo trucco è che non è possibile utilizzare animation-mode:forwards. Questo significa che dobbiamo riposizionare l’elemento ad un equivalente del suo stato prima di applicare la variazione transform-origin.

#5) Transform-origins negativo

E possibile impostare un valore negativo per la proprietà transform-origin, il quale è utile per creare percorsi circolari di movimento. Invece di usare specifiche come translate e rotation per creare animazioni circolari (Es. Moving an element aong a circle) possiamo semplificare il tutto utilizzando il valore negativo di transform-origin oltre ad un secondo elemento o pseudo-elemento (se vogliamo che l’elemento ruoti in modo circolare). Utilizzando diversi valori negativi su transform-origin, siamo in grado di riutilizzare la stessa animazione per più elementi mantenendo il movimento circolare di ognuno.

See the Pen Simple CSS Circular Motion Technique by Zach Saucier (@Zeaklous) on CodePen.


#6) Box shadow magic

Per animazioni di semplici forme prive di contenuto, box-shadow è molto utile. La proprietà box-shadow permette di creare bordi multipli intorno agli elementi. Questa idea, unita con un po di spostamento, può creare nuovi elementi animabili da nessun elemento HTML aggiuntivo. Questo consente di creare la seguente animazione, che sembra avere 6 elementi rotanti circolarmente me in realtà un elemento con diversi spostamenti di ombra.

See the Pen Simple CSS Circular Motion Technique by Zach Saucier (@Zeaklous) on CodePen.


#7) Utilizzando pseudo-elementi

Allo stesso modo di box-shadow, gli pseudo elementi possono essere usati per aggiungere uteriori contenuti alla comparsa di un singolo elemento. Possono avere animazioni separate dal loro contenitore padre, e il loro box shadow, è molto simile ad un elemento figlio senza markup HTML. Per questo riusciamo a creare sorprendenti animazioni di elementi singoli come quella qui sotto.

See the Pen Simple CSS Circular Motion Technique by Zach Saucier (@Zeaklous) on CodePen.

In questo esempio, tutti i grandi cerchi intorno al cerchio centrale lampeggiante, così come due dei cerchi più piccoli sul bordo (di fronte l’uno dall’altro) sono box-shadow sul principale elemento. Gli altri due piccoli cerchi fanno parte del box-shadow degli pseudo elementi e l’anello tratteggiato è un SVG applicato come sfondo su un altro pseudo elemento.

Altre cose da notare

Usa transform quando è possibile

Transform è più performante rispetto alla controparte “no-transform”. Transform è consentito anche per il design responsive permettendo cose come lo scale da utilizzare rispetto alle dimensioni originali.

Lo z-index può causare problemi

Probabilmente spendo più tempo a fixare lo z-index che risolvere qualsiasi altro problema legato alle animazioni. Gli z-index vengono gestiti diversamente dai browser, nelle animazioni la differenza principale è che Mozilla non permette di animarne i valori, mentre con Webkit non succede, infatti permette di animare valori in z-index.

Un’altra cosa da notare se si vuole che gli pseudo elementi appaiano dietro al loro elemento padre, lo pseudo elemento deve avere uno z-index negativo ma il genitore non può avere un altro stato oltre a quello di default, ciò significa che non è possibile applicare uno z-index o qualsiasi altra cosa che “sposti” il genitore da una suo contesto naturale.

Un altro trucco da sapere sullo z-index riguarda l’opacità. Ogni volta che ad un elemento viene dato un valore di opacità inferiore ad 1 e si trova con uno z-index superiore ad altri elementi, questo passa automaticamente ad livello inferiore di visiblità. Per ulteriori informazioni dai un’occhiata all’esempio di Philip Walton

Lasciati ispirare

Che si tratti di qualcosa che si vede nel mondo reale, una pagina web interessante che si trova on-line, parte di un intro video, gif, o qualcosa di completamente diverso, trova le cose che ritieni possibile creare e cerca di farlo!

Spero che questo articolo vi aiuti a costruire creazioni più impressionanti, anche se hai imparato nulla dalle specifiche tecniche!

  • Raptor

    troppo figo!!! complimenti ragazzi ho trovato per caso il vostro sito,sono alle prime armi sto imparando il php-html5-css-bootstrap,quindi di continuo cerco guide e tutto ciò che trovo utile per creare il mio blog (quasi finito) fatto tutto da solo,ora grazie a voi molte cose mi sono più chiare,prima facevo fatica a capirne il funzionamento…complimenti ancora ^^

    • laboratorioCSS

      Ciao Raptor,
      grazie per i complimenti!!!!!!!!!!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github