CSS3 animazioni
animazioni CSS3 permette animazione della maggior parte degli elementi HTML senza l'utilizzo di JavaScript o Flash!
Animazione
Supporto browser per le animazioni
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz- , o -o- specificare la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
| animation | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Quali sono CSS3 animazioni?
Un'animazione consente un elemento gradualmente passare da uno stile all'altro.
È possibile modificare il maggior numero di proprietà CSS che si desidera, tutte le volte che si desidera.
Per utilizzare l'animazione CSS3, è necessario specificare alcune fotogrammi chiave per l'animazione.
I fotogrammi chiave tenere ciò che gli stili l'elemento avrà in determinati momenti.
Il @keyframes regola
Quando si specifica stili CSS all'interno del @keyframes regola, l'animazione cambierà gradualmente dallo stile attuale al nuovo stile in determinati momenti.
Per ottenere un'animazione al lavoro, è necessario associare l'animazione a un elemento.
L'esempio seguente lega la "esempio" di animazione al <div> elemento. La volontà di animazione dura 4 secondi, e sarà gradualmente cambiare il colore di sfondo del <div> elemento da "rosso" a "giallo":
Esempio
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Prova tu stesso " Nota: se l' animation-duration proprietà non viene specificata, l'animazione avrà alcun effetto, in quanto il valore di default è 0.
Nell'esempio sopra abbiamo specificato quando lo stile cambia in base alle parole chiave "from" e "to" (che rappresenta 0% (start) e 100% (completa)).
È anche possibile usare cento. Utilizzando per cento, è possibile aggiungere il numero di cambiamenti di stile che vuoi.
Il seguente esempio cambiare il colore di sfondo del <div> elemento quando l'animazione è completa al 25%, il 50% completa, e di nuovo quando l'animazione è completa al 100%:
Esempio
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Prova tu stesso " Il seguente esempio cambiare sia il colore di sfondo e la posizione del <div> elemento quando l'animazione è completa al 25%, 50% completa, e di nuovo quando l'animazione è completa al 100%:
Esempio
/* The animation code */
@keyframes example
{
0% {background-color: red; left:0px; top:0px;}
25% {background-color: yellow; left:200px; top:0px;}
50% {background-color: blue; left:200px; top:200px;}
75% {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
} Prova tu stesso " Ritardo di animazione
L' animation-delay proprietà specifica un ritardo per l'inizio di un'animazione.
Il seguente esempio ha un ritardo di 2 secondi prima di iniziare l'animazione:
Esempio
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
} Prova tu stesso " Impostare Quante volte una animazione dovrebbe funzionare
L' animation-iteration-count proprietà specifica il numero di volte che un'animazione deve essere eseguito.
L'esempio seguente verrà eseguito l'animazione 3 volte prima di fermarsi:
Esempio
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
} Prova tu stesso " L'esempio seguente utilizza il valore " infinite " per rendere l'animazione continuerà per sempre:
Esempio
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
} Prova tu stesso " Eseguire Animazione in senso inverso o cicli alternati
L' animation-direction proprietà viene utilizzata per permettere una corsa di animazione in senso inverso o cicli alternati.
L'esempio seguente verrà eseguito l'animazione in senso inverso:
Esempio
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
reverse;
} Prova tu stesso " L'esempio seguente utilizza il valore "alternate" per rendere l'animazione prima esecuzione in avanti, poi indietro, poi in avanti:
Esempio
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction:
alternate;
} Prova tu stesso " Specificare la curva di velocità dell'animazione
L' animation-timing-function proprietà specifica la curva velocità dell'animazione.
La proprietà di animazione-timing-funzione può avere i seguenti valori:
-
ease- specifica un'animazione con un avvio lento, poi veloce, poi finiscono lentamente (questa è l'impostazione predefinita) -
linear- specifica un'animazione con la stessa velocità dall'inizio alla fine -
ease-in- specifica un'animazione con un avvio lento -
ease-out- specifica un'animazione con una fine lenta -
ease-in-out- specifica un'animazione con un avvio lento e la fine -
cubic-bezier(n,n,n,n)- consente di definire i propri valori in una funzione cubica-Bezier
L'esempio seguente mostra l'alcune delle diverse curve di velocità che possono essere utilizzati:
Esempio
#div1 {animation-timing-function: linear;}
#div2
{animation-timing-function: ease;}
#div3 {animation-timing-function:
ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5
{animation-timing-function: ease-in-out;} Prova tu stesso " Animazione Stenografia Proprietà
L'esempio che segue utilizza sei delle proprietà di animazione:
Esempio
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Prova tu stesso " Lo stesso effetto di animazione come sopra può essere conseguito utilizzando la scorciatoia animation struttura:
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 » Esercizio 6»
Proprietà di animazione CSS3
La seguente tabella elenca le @keyframes regola e tutte le proprietà di animazione:
| Proprietà | Descrizione |
|---|---|
| @keyframes | Specifica il codice di animazione |
| animation | Una proprietà scorciatoia per settare tutte le proprietà di animazione |
| animation-delay | Specifica un ritardo per l'inizio di un'animazione |
| animation-direction | Specifica se un'animazione dovrebbe svolgere in senso inverso o cicli alternati |
| animation-duration | Specifica il numero di secondi o millesimi di secondo un'animazione necessario per completare un ciclo |
| animation-fill-mode | Specifica uno stile per l'elemento quando l'animazione non sta giocando (quando è finito, o quando si ha un ritardo) |
| animation-iteration-count | Specifica il numero di volte che un'animazione dovrebbe essere giocato |
| animation-name | Specifica il nome dell'animazione @keyframes |
| animation-play-state | Specifica se l'animazione è in funzione o in pausa |
| animation-timing-function | Specifica la curva di velocità dell'animazione |