Fino ad ora abbiamo parlato un po’ di come dare dello stile ai nostri elementi html. E se ti dicessimo che non devi necessariamente creare delle pagine statiche? Nonostante per integrare le animazioni, infatti, il linguaggio sovrano sia Javascript , anche il nostro amico CSS può darci grandi soddisfazioni.
In questa guida parleremo di come animare e rendere più dinamici i nostri siti web senza utilizzare javascript, ma soltanto con l’utilizzo del linguaggio CSS.
Nello specifico andremo a conoscere 3 proprietà fondamentali :
- transition
- transform
- animation
Transition CSS
La proprietà transition del CSS ti consentirà di ottenere un passaggio graduale tra due stati nella stessa proprietà.
Viene principalmente utilizzato con le pseudo-classi come hover, active o focus.
Possiamo specificare 4 proprietà per la transizione da uno stato ad un altro :
- transition-property: la proprietà sulla quale applicare la transizione;
- transition-duration: la durata della transizione;
- transition-timing-function: la curva temporale della transizione;
- transition-delay: il ritardo con cui far iniziare la transizione;
Queste 4 proprietà sono raggruppabili in un’unica shorthand (scorciatoia): la proprietà “transition”
Vediamo un piccolo esempio:
.button {
background : red;
border: solid 2px red;
color: black;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: linear;
}
.button:hover {
background: orange;
border: solid 2px orange;
color: white;
}
In questo semplice esempio, vediamo come all’hover sul bottone il suo colore di background, di bordo e di testo cambierà in modo graduale secondo le caratteristiche da noi date.
Notiamo, inoltre, che anche quando il mouse lascerà il bottone le proprietà torneranno nello stato iniziale con una transizione; questo è dovuto al fatto che abbiamo specificato la transizione nello stato di default e non nella pseudo-classe.
Come dicevamo, esiste anche un altro metodo – più breve – per scrivere tutte queste proprietà, ovvero la proprietà transition.
Vediamo in questo esempio come si trasforma il codice.
.button {
background: red;
border: solid 2px red;
color: black;
transition: all 0.5s linear;
}
.button:hover {
background: orange;
border: solid 2px orange;
color: white;
}
Ti facciamo notare anche la keyword “all” utilizzata nella proprietà transition-property: questa attribuisce una transizione a tutte le proprietà dell’elemento.
Se, ad esempio, sostituissimo la keyword “all” con “background” la transizione verrebbe applicata solo alla proprietà background, mentre le proprietà border e color cambierebbero immediatamente, dando quasi un effetto di “scatto” all’occhio.
Transform CSS
La proprietà transform ci permette di trasformare un elemento in 2D o in 3D.
Le trasformazioni che possiamo effettuare in 2D ci permettono di :
- traslare
- ruotare
- ridimensionare
- distorcere
Le trasformazioni che possiamo effettuare in 3D ci permettono di cambiare la prospettiva di un elemento.
Vediamo, adesso, le trasformazioni che possiamo effettuare in 2D, nonché quelle più utilizzate:
Traslazioni
.transform {
transform: translate(x,y);
}
Con questa funzione possiamo spostare un elemento; accetta due parametri (x e y) che corrispondono allo spostamento sull’asse x – ovvero quello orizzontale – e sull’asse y – ovvero quello verticale -.
Abbiamo anche la possibilità di traslare solo sull’asse X o sull’asse Y con
- translateY(y)
- translateX(x)
Ovviamente, i valori da inserire sono i valori inerenti alla macro-categoria unità di misura.
Rotazioni
.transform {
transform: rotate(angolo);
}
Con questa funzione possiamo far ruotare un elemento; accetta come parametro un angolo di rotazione – ad esempio “120deg” -, sia positivo che negativo.
Ridimensionamento
.transform {
transform: scale(x,y);
}
Con questa funzione possiamo ridimensionare un elemento in scala; i valori da inserire saranno un numero intero o con la virgola a seconda di quanto vogliamo ridimensionare lungo l’asse orizzontale e lungo l’asse verticale.
esempio:
.transform {
transform: scale(1.5,2);
}
Nel caso in cui il ridimensionamento sia uguale sia per l’asse orizzontale che per il verticale possiamo inserire anche un unico valore.
Distorsione
.transform {
transform: skew(angolo-x,angolo-y);
}
Con questa funzione possiamo distorcere la visualizzazione di un elemento; i valori da inserire saranno un angolo per la distorsione orizzontale e uno per quella verticale.
Per tutte le trasformazioni viste fino ad ora, possiamo aggiungere anche la proprietà “transform-origin” che indicherà il punto di “ancoraggio” ovvero il punto di origine della trasformazione. Di default questo punto coincide con l’angolo in alto a sinistra.
Animation
Le animazioni sono probabilmente lo strumento di progettazione di animazioni web più potente che CSS3 ha da offrire.
Le animazioni consentono di modificare gradualmente lo stile degli elementi della pagina, andando a definire più “keyframes” all’interno dell’animazione.
A differenza della transizione, la proprietà animation ci da molto più controllo sulle fasi intermedie dell’animazione.
Possiamo creare un’animazione attraverso la regola @keyframes
I keyframes all’interno di questa regola determinano il tipo di stile applicato a un elemento in un dato momento, fondamentalmente rappresenta il “codice” che esegue l’animazione.
Vediamo come creare un’animazione con @keyframes
@keyframes bounce {
from {
transform: translate(0, 0);
}
40% {
transform: translate(0, -30px) scaleY(1.1);
}
70% {
transform: translate(0, -15px) scaleY(1.05);
}
to {
transform: translate(0, 0);
}
}
In questo modo abbiamo creato un’animazione, che abbiamo chiamato “bounce”, che simulerà il rimbalzare di una palla. Come possiamo notare, abbiamo creato 4 keyframes dove l’elemento verrà modificato.
Il primo, ovvero from, indica il punto di partenza del nostro elemento e possiamo sostituirlo anche con 0%.
L’ultimo, ovvero to, invece, indica il punto finale dell’animazione e possiamo anche sostituirlo con 100%.
Gli altri due keyframes ovvero 40% e 70% indicano invece degli stati intermedi della nostra animazione; questi non sono obbligatori, a differenza dello stato iniziale e finale dell’animazione.
Possiamo aggiungere quanti keyframes vogliamo alla nostra animazione e “complicarla” a nostro piacimento.
Una volta creata un’animazione con un nome, non ci resta che assegnarla ad un elemento.
.bounce-animated {
animation-name : bounce;
animation-duration: 1s;
}
Abbiamo moltissime proprietà che ci permettono di modificare un’animazione ma queste due – animation-name e animation-duration – sono obbligatorie per far partire la nostra animazione.
Vediamole, adesso, tutte :
- animation: modalità abbreviata che serve ad impostare tutte le proprietà che seguono;
- animation-name: (obbligatorio) indica il nome dell’animazione da applicare a un elemento;
- animation-duration: (obbligatorio) specifica quanto dura l’animazione;
- animation-delay: (opzionale) indica il ritardo in termini di tempo con cui inizia l’animazione ;
- animation-direction: (opzionale) specifica la direzione dell’animazione; i possibili valori sono:
- normal : da 0% a 100%
- reverse: da 100% a 0%;
- alternate: da 0% a 100% e da 100% a 0% in base a quante volte viene ripetuta l’animazione
- alternate-reverse : da 100% a 0% e da 0% a 100% in base a quante volte viene ripetuta l’animazione
- animation-iteration-count: (opzionale) specifica quante volte l’animazione deve essere ripetuta, i possibili valori sono:
- infinite : l’animazione viene ripetuta all’infinito
- numero : sarà il numero di volte in cui la nostra animazione verrà ripetuta.
- animation-fill-mode: (opzionale) indica lo stile da applicare prima che l’animazione parta e una volta terminata l’animazione; i possibili valori sono:
- forwards : una volta terminata l’elemento avrà lo stile dell’ultimo keyframe
- backwards : una volta terminata l’elemento avrà lo stile del primo keyframe
- both : quando l’animazione termina mantiene lo stile del kayframe nel quale è terminata
- animation-timing-function: identifica la curva di velocità dell’animazione.
Con questa panoramica degli effetti di animazione i tuoi siti saranno unici! Allora, ti va di provare?
