Animazioni e transizioni in CSS

Al giorno d'oggi animazioni e transizioni CSS  funzionano in tutti i browser, anche IE! (A partire dalla versione 10). Ci sono 2 modi per creare le animazioni CSS. Il primo è molto semplice, e funziona tramite la proprietà di transizione.

Con questa funzione è possibile creare effetti al passaggio del mouse o al contrario, al suo alontanamento da una certa area, oppure è possibile attivare le animazioni utilizzando JavaScript per modificare le proprietà di un oggetto.

Il secondo modo per creare una animazione è un po 'più complicato e aviene atraverso  @keyframe, che permette di creare l'animazione ripetitiva o loop(in inglese), indipendentemente dalla azione dell'utente o  posimo gestirla atraverso  JavaScript.

Per dimostrare l'effetto di transizioni sulla base delle proprietà css  transizion, ho creato  un esempio con il pianeta e un razzo. Quando si passa sopra il pianeta, il razzo si avvicina  più vicino al pianeta e prosegue di girare su un orbita piu stretta  se allontaniamo il mous ritorna al orbita precedente .

Codice del'animazione è seguente:

<style>
.container{
width: 300px;
height:300px;
margin: 0 auto;
position:relative;
}
.planet{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(images/animazioni/planet.png) no-repeat center center;
}
.rocket{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(images/animazioni/rocket.png) no-repeat 50px center;
-webkit-animation:orbit 2s linear infinite;
animation:orbit 2s linear infinite;
transition:background-position 0.8s;
}
.container:hover .rocket{  /* cambio della orbita al passagio del mouse*/
background-position:80px center;
}
/* Impostare keyframe per la nostra animazione  */
@-webkit-keyframes orbit {
from {/*punto del inizio della animazione */
            -webkit-transform:rotate(0deg);}/* nel nostro esempio animazione basata su trasformazione e piu preciso su rotazione che comincia dal 0 gradi)*/
to     {
        -webkit-transform:rotate(360deg);/* la nostra rotazione fa il giro completo perché abbiamo imposto di fare un giro di 360 gradi */
        }
}
/
@keyframes orbit {/* ho inserito   -webkit-transform , per essere sicuro che l-animazione funzionera anche su Googol chrom   */
from {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);}
to {
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        }
}
 
</style>
 
/*MARKUP HTML */
<div class="container">
     <div class="planet"></div>
    <div class="rocket"></div>
</div>

Scopri di piu su animazioni e transizioni qui

Letto 432 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso