4) Nuove funzionalità CSS3 – Semplici animazioni

Semplici animazioni in CSS 3

Con il nuovo CSS3 è possibile fare a meno di jQuery o altre specifiche librerie javascript per effettuare animazioni complesse. Infatti ormai tutti i più moderni browser supportano l’animazione “keyframe” del CSS3 utilizzando il tag “@keyframes” come proprietà dell’animazione.
Possiamo per esempio realizzare una palla che palleggia continuamente all’interno del browser..
Innanzitutto costruiamo tramite CSS3 il cerchio/palla:

.palla {
	background-color: #B22222;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: 0;
	left:45%;
	animation-name: rimbalzo;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-out;
	animation-delay: 2s;
	animation-play-state: running;
	animation-fill-mode; none;
}

Innanzitutto abbiamo realizzato la palla con larghezza e altezza corrispondente, ma per rendere poi il tutto un po’ più…. rotondo, abbiamo aggiunto in tutti i lati il bordo arrotondato al 50%, in modo da renderlo completamente rotondo.
Dopo di chè abbiamo impostato alcuni dati riguardo l’animazione: ossia l’abbiamo nominata, impostato una durata, che fosse ripetuto senza mai fermarsi e che crei una animazione alternata per direzione. Inoltre abbiamo utilizzato la tipologia di movimento “ease-out” per creare un effetto più realistico di rimbalzo.
Manca ora d’impostare la proprietà “@keyframes”, che è riferita precisamente all’animazione che abbiamo appena creato. Essa infatti potrà essere associata a tutte le animazioni che vogliano, basta indicare accanto il nome dell’animazione di riferimento.

@keyframes rimbalzo {
	from {
		bottom: 0;
		height:  70px;
	}
	10% {
		bottom: 0;
		height: 10 0px;
	}
	to {
		bottom: 50%;
	}
}

È possibile vedere come la palla raggiunga il 50% dell’altezza dalla base (bottom) dell’area parent dove si trova inclusa. Inoltre è stato aggiunto un frame al 10% dell’animazione (che si ripeterà in ogni passaggio) poiché essenzialmente nel primo frame dell’animazione (“from”) si schiaccia la palla in altezza, mantenendola sempre sulla base dell’area a disposizione, per poi liberarla in altezza al 10% dell’animazione, in modo da evidenziare l’effetto di schiacciamento a terra che subisce una palla quando rimbalza.

Vediamo come funziona questa semplice animazione:

 
Condividi questo articolo su:

Facebook Twitter Linkedin Digg Email

Leave a Comment

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">


+ quattro = 13