Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.
Il CSS3 ha introdotto una nuova specifica per gestire le transizioni animate, la funzione transition
Vediamo una semplice struttura che incorpora la funzione transition:
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
<style type="text/css">
div.transition
{
width:100px; /* valore with iniziale */
height:100px;
background:green;
/* Transition div generico */
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease;
transition-delay: 0.1s;
/* Transition div motore trident -ms- IE 9 */
-ms-transition-property: width;
-ms-transition-duration: 2s;
-ms-transition-timing-function: ease;
-ms-transition-delay: 0.1s;
/* Transition div motore mozilla -moz- Firefox */
-moz-transition-property: width;
-moz-transition-duration: 2s;
-moz-transition-timing-function: ease;
-moz-transition-delay: 0.1s;
/* Transition motore webkit Safari e Chrome */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: ease;
-webkit-transition-delay: 0.1s;
/* Transition motore presto -o- Opera */
-o-transition-property: width;
-o-transition-duration: 2s;
-o-transition-timing-function: ease;
-o-transition-delay: 0.1s;
}
div.transition:hover
{
width:300px; /* valore with finale, l'animazione è gestita da transition */
}
</style>
</head>
<body>
<div class="transition">Il contenuto del documento</div>
</body>
</html>
Il risultato del codice rappresentato è il seguente:
Analizziamo il codice:
width:100px; /* valore with iniziale */ -> qui definisco la proprietà width del div
transition-property: width; -> definisco che with andrà animato con un transizione
transition-duration: 2s; -> la durata della transizione sarà di 2 secondi
transition-timing-function: ease; -> l’interpolazione può essere ease, linear, ease-in, ease-out, ease-in-out (provate per capire le differenze)
transition-delay: 0.1s; -> l’animazione parte con un ritardo di un decimo di secondo
div.transition:hover
{
width:300px; /* valore with finale, l’animazione è gestita da transition */ -> il valore finale che avrà div quando avremo un hover, cioè il mouse si posizionerà sopra al div.
Per garantire la compatibilità anche con i browser più datati è necessario indicare in serie le istruzioni specifiche per i vari motori di rendering come mostrato nelle righe qui sotto:
transition-property: width; -ms-transition-property: width; -moz-transition-property: width; -webkit-transition-property: width; -o-transition-property: width;
