Raccolta effetti di Transizione Css3

9 maggio 2011

Una delle novità più importanti di css3 che riescono a farci desiderare questo linguaggio sono gli effetti di transizione.

Già ne avevo parlato, ma oggi voglio approfondire l’argomento raccogliendo tutte quelle transizioni di forma, colore e movimento che, se ben accoppiate, riescono a creare qualcosa di spettacolare.

1) Transizione di Rotazione elementi

Poniamo il caso volessimo far ruotare attorno ad un asse un determinato elemento html con i css3 il codice da utilizzare sarebbe il seguente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

div {
width: 100px;
height: 100px;
background: #cc0000;
transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
}

div:hover {
transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-webkit-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
}

Come avete visto quando il mouse va sopra il div esso gira, mentre appena il div perde il suo stato hover ( il mouse non è più sopra ) fa il giro inverso ritornando al suo stato originale.

Demo

2) Creare effetto elastico su elementi html

Altra chicca che ci regala css è quella di poter donare agli elementi che cambiano dimensioni un effetto elastico. Questo esempio vale per l’effetto di transizione di forma:

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

@-webkit-keyframes resize {
0% {
width: 100px;
height: 100px;
}
96% {
width: 204px;
height: 204px;
}
100% {
widht: 200px;
height: 200px;
}
}

div {
width: 100px;
height: 100px;
background: #cc0000;
}

div:hover {
width: 200px;
height: 200px;
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 4;
}

Quest’altro effetto invece è applicato per la transizione di movimento:

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

@-webkit-keyframes moviment {
0% {
margin-left: 0px;
}
100% {
margin-left: 100px;
}
}

div {
width: 100px;
height: 100px;
background: #cc0000;
}

div:hover {
-webkit-animation-name: moviment;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
}

Questo effetto rende molto di più su Safari.

3) Opacità in transizione

Se dovessi dare il mio verdetto sull’effetto di transizione di css3 da me preferito, la mia scelta ricadrebbe sulle opacità. Se volessimo dare un effetto di transizione a un elemento dovremmo scrivere il seguente codice:

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div {
width: 100px;
height: 100px;
background: #cc0000;
margin: 0px auto;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
}

div:hover {
opacity: 0;
}

4) Transizione di effetti css3

Attraverso le transizioni possiamo pure influire sui nuovi effetti di css3 come border-radius per gli angoli arrotondati oppure box-shadow per l’ombra sugli elementi html.

Qua trovate un esempio per border-radius:

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

div {
width: 100px;
height: 100px;
background: #cc0000;
border-radius: 0px;
transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}

div:hover {
border-radius: 100px;
}

Qua trovate un esempio per box-shadow:

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

div {
width: 100px;
height: 100px;
background: #cc0000;
-moz-box-shadow: 5px 5px 10px #000;
-webkit-box-shadow: 5px 5px 10px #000;
box-shadow: 5px 5px 10px #000;
transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
}

div:hover {
-moz-box-shadow: 10px 10px 20px #000;
-webkit-box-shadow: 10px 10px 20px #000;
box-shadow: 10px 10px 20px #000;
}

Come si crea un effetto del genere?

Per creare un effetto del genere in realtà non serve neanche tanto. Basta conoscere le proprietà fondamentali di css3 per la transizione.

- transition-property questa proprietà serve a indicare quale dovrà cambiare valore;
- transition-duration questa proprietà indica la durata della transizione, espresso in secondi;
- animation-iteration-count questa indica il numero di volte che la transizione deve avvenire;
- animation-name indica il nome dell’animazione nel caso di keyframe per browser webkit;
- animation-direction indica la direzione dell’animazione nel caso di movimento.

Ultima nozione, che è da conoscere, è il funzionamento di un’animazione con keyframe. Praticamente attraverso delle impostazioni particolari è possibile gestire l’animazione in ogni suo momento utilizzando le percentuali:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

@-webkit-keyframes resize {
0% {
width: 100px;
height: 100px;
}
96% {
width: 204px;
height: 204px;
}
100% {
widht: 200px;
height: 200px;
}
}

Vi è piaciuto l’articolo? Commentatelo o condividetelo con i vostri contatti

Potresti trovare interessante anche

Realizziamo una semplice Gallery Fullscreen con i Css3

Pubblicato in css, css3 |

Raccolta effetti di Transizione Css3

1) Transizione di Rotazione elementi

2) Creare effetto elastico su elementi html

3) Opacità in transizione

4) Transizione di effetti css3

Come si crea un effetto del genere?

Potresti trovare interessante anche

Iscriviti alla newsletter

19 commenti per Raccolta effetti di Transizione Css3

Lascia un Commento