Salve a tutti!

Grazie ai css3 siamo in grado di realizzare animazioni senza dover ricorrere a javascript e questo porta molti vantaggi. Bisogna tener conto però che i css3 sono ancora nello stato “draft” ovvero “bozza” per il w3c e quindi possono cambiare nel tempo aggiungendo nuove funzionalità oppure cambiare quelle già esistenti. Inoltre la maggior parte delle proprietà dei css3 non sono interpretate dai vecchi browser e alcune non sono interpretate neanche dai browser moderni. Bisogna quindi fare molta attenzione al loro utilizzo.

Prima di arrivare al codice cercherò di illustrare le nozioni che bisogna avere per affrontare questo argomento. Vi ricordo che per seguire questo tutorial occorrono delle solide base sui css.

Transizioni css3

Le transizioni css3 ci permettono di applicare degli effetti che vanno ad agire sui cambiamenti applicati ai valori css. Per spiegarvi meglio pensate ad un link a cui abbiamo applicato un colore di sfondo ed un altro colore sulla pseudo classe :hover. Quando passiamo il mouse sopra l’elemento questo cambierà colore di sfondo ma in modo istantaneo. Grazie alle transizioni css3 potremo passare da un colore di sfondo all’altro con più moderazione. Al momento le transizioni css3 sono supportate da Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ e IE 10.

Vediamo assieme le varie proprietà e relativi valori delle transizioni:

• transition-property: qui specifichiamo il nome della proprietà css a cui applicare la transizione. Di defaul è impostata a All, ovvero a tutte le proprietà.
• transition-duration: specifichiamo la durata della transizione in secondi o millisecondi
• transition-timing-function: definisce la velocità con la quale si passa da un gruppo di regole css ad un altro. Questo può assumere diversi valori:
  • linear: l’animazione ha la stessa velocità dall’inizio alla fine
  • ease: questa è l’opzione di default. All’inizio l’animazione parte lenta, poi si velocizza e poi verso la fine rallenta
  • ease-in: l’animazione parte lentamente
  • ease-out: l’animazione rallenta alla fine
  • ease-in-out: l’animazione rallenta all’inizio e alla fine.
  • cubic-bezier(n,n,n,n): questo valore permette di impostare un proprio andamento.
• transition-delay: definisce quando la transizione deve partire.

Animazioni css3

Le animazioni css3 sono una delle novità più belle. Ci permettono infatti di eseguire delle animazioni senza l’ausilio di javascript. Il problema sta nel supporto in quanto solo firefox e i browser webkit come google chrome e safari supportano correttamente queste proprietà. Con il futuro internet explorer 10 potremo vedere le animazioni anche nel browser di casa Microsoft.

Ora diamo uno sguardo alle proprietà e ai relativi valori che possiamo utilizzare:

• animation-name: permette di definire il nome per la @keyframes animation (vedremo più avanti di cosa si tratta).
• animation-duration: definisce il tempo totale per un ciclo di animazione. Si possono utilizzare i secondi o i millisecondi
• animation-timing-function: definisce la velocità con la quale si passa da un gruppo di regole css ad un altro. Questo può assumere diversi valori:
  • linear: l’animazione ha la stessa velocità dall’inizio alla fine
  • ease: questa è l’opzione di default. All’inizio l’animazione parte lenta, poi si velocizza e poi verso la fine rallenta
  • ease-in: l’animazione parte lentamente
  • ease-out: l’animazione rallenta alla fine
  • ease-in-out: l’animazione rallenta all’inizio e alla fine.
  • cubic-bezier(n,n,n,n): questo valore permette di impostare un proprio andamento.
• animation-iteration-count: permette di specificare quante volte l’animazione deve essere eseguita
• animation-delay: specifica quando l’animazione deve partire
• animation-play-state: specifica quando un animazione deve continuare o mettersi in pausa
• animation-fill-mode: specifica in che modo gli stili dei css vengono applicati all’inizio e alla fine dell’animazione. Può avere i seguenti valori:
  • none: gli effetti dell’animazione sono visibili solo durante la riproduzione effettiva l’animazione
  • forwards: il fotogramma finale dell’animazione continua ad applicarsi anche dopo la ripetizione finale dell’animazione completa
  • backwards: Il fotogramma iniziale dell’animazione viene utilizzato non appena lo stile dell’animazione viene applicato ad un elemento. Questo riguarda solo le animazioni che hanno un valore diverso da zero per animation-delay
  • both: Il fotogramma iniziale dell’animazione viene utilizzato non appena lo stile dell’animazione viene applicato ad un elemento e il fotogramma finale dell’animazione continua ad applicarsi anche dopo la ripetizione finale dell’animazione completa. Questo riguarda solo le animazioni che hanno un valore diverso da zero per animation-delay

Fotogrammi chiave

Per chi proviene da flash o da programmi di animazione questo punto è piuttosto familiare. Praticamente definiscono cosa succede in un preciso istante durante un’animazione. L’esempio più banale è pensare all’inizio e alla fine dell’animazione. Questi due punti specificano infatti delle azioni precise.

Bene.. ora che abbiamo appreso le nozioni basilari per seguire il tutorial vediamo come creare il nostro slider animato!

Per prima cosa pensiamo alla struttura. Lo slider sarà composto di 5 immagini all’interno di una lista non ordinata. La lista non ordinata sarà posizionata all’interno di un contenitore, che al momento non serve a nulla ma che in un prossimo tuorial più avanzato ne faremo uso.

Codice html

<div id="slider">
   <ul>
        <li><img src="images/slide/1.jpg" alt="1" width="940" height="350" /></li>
        <li><img src="images/slide/2.jpg" alt="2" width="940" height="350" /></li>
        <li><img src="images/slide/3.jpg" alt="3" width="940" height="350" /></li>
        <li><img src="images/slide/4.jpg" alt="4" width="940" height="350" /></li>
        <li><img src="images/slide/5.jpg" alt="5" width="940" height="350" /></li>
   </ul>
</div>

P.S: Nel codice html completo ho utilizzato html5.

Codice Css

#slider{
	margin:0 10px;
	padding:0;
	float:left;
	width:940px;
	height:350px
}

Iniziamo dal codice del div #slider che non fa altro che creare un contenitore per le slide.

#slider ul{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative
}
#slider ul li{
	margin:0;
	padding:0;
	opacity:0;
	position:absolute;
	top:0;
	left:0;
-o-animation-name:slides_animation;
-o-animation-duration:25s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-play-state: running;
-o-animation-fill-mode: forwards;
 -webkit-animation-name:slides_animation;
	-webkit-animation-duration:25s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name:slides_animation;
	-moz-animation-duration:25s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	animation-name:slides_animation;
	animation-duration:25s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;
}

Il codice postato riguarda la lista che contiene le immagini. All’elemento <ul> impostiamo la proprietà list-style:none che ci permette di eliminare i puntini. Poi la cosa più importante è impostare la proprietà position:relative che servirà agli elementi <li>. Infatti il impostando questa proprietà con questo valore faremo in modo tale che l’area a cui devono fare riferimento gli elementi <li> sia solo quella occupata dall’elemento <ul>.

Gli elementi <li> hanno come impostazione il position:absolute così da mettere tutti gli elementi uno dietro l’altro. Poi impostiamo l’opacità pari a 0 con opacity:0 così da nascondere tutti gli elementi. Poi impostiamo la posizione degli elementi con top:0 e left:0.

Infine diamo le impostazioni di transizione. Qui entrano in gioco i prefix vendor i quali si devono utilizzare quando un browser implementa una proprietà CSS in fase sperimentale che non ha ancora raggiunto il livello di Candidate Reccomandation (CR) per il W3C CSS Working Group. Questa sezione merita sicuramente un capitolo a parte e quindi provvederò a scrivere un articolo dedicato solo a questo.

Per quanto riguarda le specifiche sulle transizioni confrontate la spiegazione data in precedenza con i vari valori assegnati così da capire il significato.

Dopo queste impostazioni vediamo di far partire l’animazione in tempi diversi per ogni slide. Questo è possibile sempre grazie ai css3 che ci permettono attraverso il nuovo selettore nth-child di assegnare ad ogni preciso elemento un tempo diverso. Il primo elemento ovviamente parte dall’inizio ovvero da 0 secondi quindi non c’è bisogno di specificarlo.

#slider ul li:nth-child(2){
-o-animation-delay:5s;
 -webkit-animation-delay:5s;
	-moz-animation-delay:5s;
	animation-delay:5s
}
#slider ul li:nth-child(3){
-o-animation-delay:10s;
 -webkit-animation-delay:10s;
	-moz-animation-delay:10s;animation-delay:10s
}
#slider ul li:nth-child(4){
-o-animation-delay:15s;
 -webkit-animation-delay:15s;
	-moz-animation-delay:15s;
	animation-delay:15s
}
#slider ul li:nth-child(5){
-o-animation-delay:20s;
 -webkit-animation-delay:20s;
	-moz-animation-delay:20s;
	animation-delay:20s
}
#slider ul li img{
	display:inline-block
}

Un pochino di matematica…

Vediamo di capire come mai ho impostato il valore 25s nella proprietà animation-duration.

Io ho utilizzato 5 immagini. Poi bisogna definire il tempo effettivo dell’animazione per ogni elemento. Io ho deciso che la durata dell’animazione sia di 5 secondi

Quindi 5 immagini * 5 secondi = 25 secondi. Ecco qui la durata complessiva dell’animazione. Semplice vero!!

Poi, nel momento in cui andremo ad aggiungere la proprietà @keyframes animation, ovvero la nostra animazione (nel mio caso l’ho chiamata slides_animation) bisogna capire quanti fotogrammi occorrono per creare 1 secondo di animazione. Anche questa operazione è molto semplice:

Il totale dei fotogrammi è pari a 100. Questo valore lo dividiamo per il totale complessivo della durata dell’animazione ovvero 25 secondi. Quindi 100/25 = 4 fotogrammi.

A questo punto possiamo dire che ci occorrono 4 fotogrammi per avere 1 secondo di animazione. Tutto chiaro?!

Keyframes

Dopo i nostri calcoli vediamo il codice della nostra animazione:

@-o-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}
@-webkit-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}

@-moz-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}

@keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}

Vediamo un pochino di spiegare cosa ho fatto. Il primo keyframe ovvero il valore 0% viene impostato con una opacità pari a 0 in quanto l’immagine all’inizio non deve apparire. Dopo 1 secondo, quindi al 4° fotogramma gli diciamo di far apparire l’immagine. Poi manteniamo l’immagine visibile per 3 secondi ovvero fino al 16° fotogramma. Poi gli diciamo che in altri 2 secondi l’immagine deve sparire . Qui potevo farlo in 1 secondo ma poi l’animazione risultava troppo veloce per i miei gusti. Poi fino alla fine gli diciamo di far rimanere l’immagine nascosta.

Conclusione

Bene… siamo arrivati alla fine di questo tutorial.

Ovviamente questo articolo vuole essere solo un primo punto di partenza per capire le potenzialità dei css3 e in questo caso delle animazioni. Ci sono altri modi per realizzare uno slideshow attraverso i css3 ma questo mi sembrava quello più semplice per riuscire ad illustrare le varie proprietà e i relativi valori. Vi ricordo inoltre che per il momento purtroppo questi restano solo degli esempi in quanto la compatibilità con i browser non è su larga scala.

Potete vedere la demo e scaricare i file attraverso i rispettivi link che trovate ad inizio articolo.

Come sempre la parola passa a voi. Cosa pensate di tutto questo? Vi piace la strada intrapresa dai css?

Vi saluto augurandovi buono studio!