Animazioni con CSS3

Facciamo subito pratica In questo articolo vedremo in funzione le sette proprietà dell’animazione dei CSS3. Cominciamo subito con l’ esempio: […]
Animazioni con CSS3

Facciamo subito pratica

In questo articolo vedremo in funzione le sette proprietà dell’animazione dei CSS3. Cominciamo subito con l’ esempio: prendiamo un’immagine (nel nostro caso una bolla) e inseriamola all’interno del tag body:

<body>
    <img src="soap.png" alt="soap" />
</body>

Dopodichè cominciamo a stilare il nostro css. La prime proprietà che andremo a settare sono le “@keyframes” (permettono di definire un’animazione nel corso di un periodo di tempo) position e trasformation, serviranno rispettivamente a definire la posizione iniziale e finale dell’immagine e a scalarne le dimensioni a seconda della posizione in cui si trova. Abbiamo inserito il suffisso webkit per gli interpreti Chrome e Safari, unici browser compatibili con le proprietà dell’animazione.

@-webkit-keyframes position {
    /*Stabilisce la posizione iniziale e finale dell'oggetto*/
    0%   { top : 220px; left : 0%;  } /*posizione iniziale*/
    100% { top : 146px; left : 100%;  } /*posizione finale*/
}

@-webkit-keyframes trasformation{
    0%{ -webkit-transform : scale(1); } /*iniziale*/
    50%{ -webkit-transform : scale(0.9); } /*intermedia*/
    100%{-webkit-transform : scale(0.5); } /*finale*/
}

Ora ci tocca richiamare le istanze delle keyframes con la proprietà “animation-name: ” e associargli le altre proprietà in modo tale da completare l’effetto visivo dell’animazione.

img{
    position : absolute;
    
    /*Imposta l'immagine fuori campo*/
    top: -9999px; 

    /*Associa le istanze delle keyframes all'immagine*/
    -webkit-animation-name: position, trasformation;  /* none | nome */

    /*Imposta la durata dell'animazione*/
    -webkit-animation-duration:30s; /* time */

    /*Numero ripetizione dell'animazione*/
    -webkit-animation-iteration-count:1; /* inherit | number */

    /*Imposta animazione di ritorno*/
    -webkit-animation-direction : normal; /* normal | alternate */

    /*Tot di secondi prima che parte l'animazione*/
    -webkit-animation-delay: 1s; /* time */

    /*Animazione di arrivo*/
    -webkit-animation-timing-function: linear; /* ease | linear | ease-in | ease-out | cubic-Bezier (number,number,number,number) */

    /*Avvia o mette in pausa l'animazione*/
    -webkit-animation-play-state:running; /* running | paused */
}

Clicca qui per scaricare l’esempio completo

Provalo subito

Prova la demo Consulta il codice
  • massimo buzzelli

    Salve, inanzitutto desidero ringraziarvi per questa animazione, a tal proposito vorrei chiedervi se è possibile arrestare il movimento in un punto preciso ( ad esempio a centro pagina), e ovviamente l’oggetto in questione non deve scomparire come nel vostro esempio. Grazie ancora… ciao!

  • Antonio Polese

    Ciao Massimo, grazie a te per averci fatto visita 😉
    Per arrestare l’elemento in un punto preciso della pagina basta settare la proprietà left del keyframes position (es. left:50%) ed aggiungere la proprietà animation-fill-mode:forwards (che mantiene il valore della proprietà finale. Ne parlerò dettagliatamente in un post nei prossimi giorni) al selettore img.

    Ti posto l’esempio a questo link: http://jsfiddle.net/wJ6CL/1/

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github