Differenza tra animazione e transizione in CSS. Animazione in pratica

La differenza tra animazioni CSS e transizioni CSS sta nel fatto che animazioni fornisce maggiori opportunità per la trasformazione e nella gestione degli oggetti.  In altre parole, animazioni sono per i piu esperti e le  transizioni sono per tutti.

Ad esempio, se avete solo bisogno di fare un pulsante, che cambia gradualmente il colore di sfondo quando si passa sopra con il mouse  basterebbe usare  le transizioni di CSS. Se è necessario ottenere una realizzazione più complessa  per esempio,  determinare il numero di ripetizioni o indicare il metodo di ritorno,  tornare alla posizione di partenza tra i cicli o definire fotogrammi chiave (@keyframe), è necessario utilizzare le animazioni e anche jscript in certi situazioni.

In totale, nel CSS3 ci sono 8 proprieta per gestire animazione (come indicato nella tabella sottostante) e la proprietà  animation  che si usa per la scrittura abbreviata di parametri di animazione .

Proprietà CSS per animazione

 

Proprieta Valore Descrizione
animation-delay (tempo) Specifica il ritardo tra l'aparizione di un elemento sulla pagina (carico) e l'inizio dell'animazione. Di solito viene indicato in secondi (s)..
animation-direction normal | alternate Questa  proprietà di animazione  specifica se l'animazione deve essere eseguita al contrario nei cicli alternati. Se il valore dell'animazione direction è impostato come "alternate", animazione sara visualizzata  come  normale  ogni ciclo dispari (1,3,5 ecc) e come un rovescio ogni ciclo pari (2,4,6, ecc). in caso che è infinita.
animation-duration (tempo) Indica durata di un ciclo (di solito in secondi - s)
animation-iteration-count infinite | (numero) Definisse quantità di cicli. Se è indicato infinite (da default), allora l'animazione proseguirà al infinito, se invece indichiamo un valore, allora sarà ripetuta tante volte quanto indicato.
animation-name stringa-identificatore Nome della animazione @keyframe, nella quale vengono inseriti punti chiave di animazione.
animation-play-state running | paused Permette di metere in pausa l'animazione (paused) e riavviarla di nuovo (running).
animation-timing-function ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1,x2,x3,x4) Definisce velocita di animazione. Deve essere costante o la velocia alla fine si abbasa, per esempio.
animation-fill-mode none | forwards | backwards | both

Indica lo stato del elemento nella animazione quando essa è finita o e in attesa di iniziare(delay)

animation -

Sintassi abbreviata (raggruppa animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction)

 

 

Ora vediamo un esempio: vediamo di fare in modo che che il titolo parte dalla parte inferiore dello schermo e si muove verso l'alto, e nello stesso tempo cambia colore dal verde al giallo. Per fare questo dovremo indicare fotogrammi chiave per inizio della nostra animazione e fotogramma chiave o come viene chiamato in css @keyframes per il punto finale,  nel nostro caso testo parte da sotto verso sotto.

Per limitare l'aria di spostamento creeremo una scatola in questa scatola inseriremo il nostro testo in forma del titolo <h2> per esempio, dopo di che indicheremo la sua posizione come assoluta per poter inserire parametro top (per quanto sara distante al inizio della animazione dal bordo superiore della scatola e dove arriverà ) e durante la nostra animazione il testo si sposterà da sotto essendo al 90 % dalla altezza della scatola e risalendo si fermerà al 1% di altezza della scatola rispetto bordo superiore. e nello stesso tempo indicheremo come deve essere il colore del testo al inizio nella fotogramma iniziale e come nella fotogramma finale.

Allora vediamo il codice completo

h2 #titoloprova
 { color: yellow; /* valore iniziale e finale   */ 
position: absolute;
top: 1%; 
animation-name: blinked; /* nome della  @animazione */ 
animation-duration: 5s; /* durata dell'animazione- 5 secondi */
animation-iteration-count: infinite; /* eseguire infinitamente */ 
 } 
@keyframes blinked 
 {
from { top: 90%; color: green; }/* posizione e colore iniziali */
to { top: 1%; color: yellow; } /*posizione e colore finale */
}

Ciao sto salendo!

Ora cerchiamo di utilizzare la pausa. Facciamo  che la nostra CSS-animazione si ferma quando l'utente mette il  puntatore del mouse sul titolo, durante spostamento del esso. È possibile utilizzare la pseudo-classe hover per H2, per la quale indicheremo proprieta   animation-play-state:  

h2 #titoloprova:hover { animation-play-state: paused; /* al passagio del puntatore del mouse fermare l'animazione  */ }

Prova a fermarmi!

Fino a questo punto abbiamo determinato solo due fotogrammi chiave  iniziale e finale. Ma la bellezza di CSS Animatione (a differenza da transition) sta nel fatto che  è possibile specificare le posizioni o @keyframe intermedie. Vengono indicati questi posizioni intermedie in percentuale rispetto il tempo totale di animazione. Quindi, vediamo di realizzare una animazione dove  il nostro titolo dopo aver salito, si sposterà verso destra fino la meta del aria concessa.

Per questo è necessario determinare le posizioni indicati in momenti corrispondenti. Dato che il nostro "clip" dura 5 secondi, per la risalita concediamo solo 4 secondi e per il passaggio a desta 1 secondo. Di conseguenza, avremo 80% e il 20% da totale di 5 secondi. Vediamo la realizzazione:

@keyframes blinked {
from { top: 99%; left: 0%; background: green; } /* posizione iniziale*/
80% { top: 1%; left: 0%; }/*ragiunge la posizione di top1% e come left rimane li */
to { top: 1%; left: 50%; background: yellow; } /* e nel terzo passagio della animazione essendo come top al 1% si sposta verso destra  alontanadosi da sinistra per 50% delle largezza dello spazio concesso*/
}

Vado a destra!

E ora vediamo come sono stati realizzati esempi in questo tutorial

Cliccare per aprire lo spoiler con la sintassi

<div style="width:400px; height:150px"><h2 id="titoloprova3">Vado a destra!<h2></div>/*ho creato una scatola con altezza e largezza per limitare lo spazio del movimento e ho atribuito posizione relativa al mio titolo che si sposta rispetto questa scatola  */
<style>
 #titoloprova3/*ho indicato gli proprieta della animazione per il mio titolo con identificatore id-titolodiprova3 perche è terzo esempio quidi dovevo rendere i titolii unici */
{ color: yellow; /* valore iniziale e finale */
position: relative;
top: 1%;
animation-name: blinked3; /* nome della @animazione */
animation-duration: 5s; /* durata dell'animazione- 5 secondi */
animation-iteration-count: infinite; /* eseguire infinitamente */
}
@keyframes blinked3 { from { top: 99%; left: 0%; background: green; } 80% { top: 1%; left: 0%; } to { top: 1%; left: 50%; background: yellow; } }
</style>

 Con la stessa tecnica posiamo realizzare qualsiasi animazione basta magari prima creare una bozza per capire tutti i fotogrammi chiave e loro sequenza dopo di che metterli per iscritto e correggere se qualcosa abbiamo dimenticato.

Leggi anche questo articolo e capirai come realizata la animazione che puoi vedere qui sotto:

Errore

404

Letto 2778 volte