Creare animazioni con i CSS3

In questo articolo mostriamo mediante poche righe di CSS3 come creare animazioni con i CSS3. In particolare verrà sviluppato un esempio di animazione azionabile al passaggio del mouse su un div. Il caso pratico d’uso è la comparsa della didascalia relativa ad un immagine, al passaggio del mouse sulla stessa.

Apriamo il nostro editor, e creiamo un nuovo file chiamato animation.html. Definiamo al suo interno la struttura della pagina html.

Nota Bene: In questo esempio facciamo uso della libreria prefixfree, introdotta in questo articolo


<!DOCTYPE HTML>
<html>
	<head?>
		<meta charset="UTF-8">
		<title>Animazioni con CSS3</title>
		<script src="prefixfree.min.js"></script>
	</head>
	<body>
	</body>
</html>

All’interno del body andiamo a creare un contenitore div, il quale conterrà al suo interno un immagine e la sua didascalia:


		<div id="img" class="hoverDiv">
			<img src="myImg.png"/>
			<span class="animation">HTML5 and CSS3</span>
		</div>

A questo punto ci occorre impostare l’animazione.

Un animazione con i CSS3, è definita mediante l’uso delle seguenti proprietà:

Nel nostro caso dovremo impostare un animazione in grado di cambiare l’altezza del div, in maniera tale da mostrare la didascalia. Imposteremo la durata dell’animazione ad un secondo:


transition-property: height
transition-duration: 1s

All’interno del tag head aggiungiamo quindi il tag style. Al suo interno imposteremo tutte le proprietà di stile necessarie.

Come prima cosa, impostiamo le caratteristiche del div con classe .hoverDiv, ovvero il contenitore il quale dovrà azionare l’animazione al passaggio del mouse.
Per questo elemento impostiamo le dimensioni, il colore di sfondo, lo ancoriamo alla sinistra della pagina. Dopo queste proprietà definiamo quindi la transizione iniziale, quando l’elemento non è attraversato dal div.


	.hoverDiv{
		width:200px;
		height:120px;
		background-color:#6cc4f7;
		color:#ffffff;
		float:left;
		margin-right:10px;
		overflow:hidden;
		transition-property:height;
		transition-duration:1s;
	}

Fatto ciò definiamo la larghezza dell’immagine al 100% rispetto al suo contenitore hoverDiv:


	.hoverDiv img{
		width:100%;
	}

Non ci resta quindi che definire al file dell’evento hover sull’elemento di classe hoverDiv. Modificheremo quindi l’altezza definendone la transizione:



	.hoverDiv:hover{
		height:260px;
		transition-property:height;
		transition-duration:1s;
	}

Se hai trovato interessante questo link e desideri scaricare l’esempio illustrato, ti chiedo di cliccare su uno dei seguenti pulsanti social per condividerne l’apprezzamento:
[like_to_read]Download:
Ti ringrazio!!!!![/like_to_read]

Michele Pierri

Sviluppatore android/web/desktop, blogger, nonchè sostenitore incallito dell’universo Cloud Computing, nel tempo libero amo fare sport e praticare arti marziali.