animazioni CSS3

CSS3, siamo in grado di creare animazioni che possono sostituire molte pagine immagini animate, animazioni Flash e JavaScript.

CSS3
animazione

CSS3 @keyframes regole

Per creare animazioni CSS3, si dovrà imparare le regole @keyframes.

@keyframes regola è quella di creare animazioni. Specificare uno stile CSS e l'animazione cambierà gradualmente al nuovo stile dallo stile corrente all'interno regole @keyframes.

Supporto per il browser

I dati riportati nella tabella rappresentano il primo browser a supportare il numero di versione della proprietà.

Subito dopo la -webkit- digitale, -MS- o -moz- fa a sostegno del prefisso attribuiscono primo numero di versione del browser.

属性
@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-

Esempi

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

animazioni CSS3

Quando si crea @keyframes animazione, associarlo a un selettore, altrimenti l'animazione avrà alcun effetto.

Specificare almeno due proprietà CSS3 animazione è associato a un selettore:

Si specifica il nome dell'animazione
Quando un'animazione lunghezza predeterminata

Esempi

L'animazione "MyFirst" legato a div elemento Durata: 5 secondi:

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Prova »

Nota: è necessario definire la durata del nome animazione e animazione.Se si omette la durata dell'animazione, non verrà eseguito in quanto il valore di default è 0.

Quali animazioni CSS3 sono?

elemento di animazione è quello di fare un graduale passaggio da uno stile all'altro effetto di stile.

È possibile modificare il maggior numero di stili, come molte volte.

Si prega di utilizzare la variazione percentuale nel tempo prescritto, o una parola chiave "da" e "per", pari a 0% e 100%.

0% è l'inizio dell'animazione, l'animazione è completa al 100%.

Per il miglior supporto del browser, si dovrebbe sempre definire il 0% e il 100% del selettore.

Esempi

Cambiare il colore di sfondo quando l'animazione è del 25% e il 50% e il 100% completa quando l'animazione di nuovo cambiata:

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

Prova »

Esempi

Cambiare il colore di sfondo e la posizione:

@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Prova »

proprietà CSS3 animazione

La seguente tabella elenca le regole @keyframes e tutte le proprietà di animazione:

proprietà	descrizione	CSS
@keyframes	Disposizioni animazione.	3
animazione	proprietà scorciatoia per tutte le proprietà di animazione, oltre alle proprietà di animazione-play-state.	3
Animazione-nome	Specifica l'animazione nome @keyframes.	3
Animazione di durata	Disposizioni di animazione necessario per completare un ciclo di secondi o millisecondi. Il valore di default è 0.	3
Animazione-timing-function	Una velocità predeterminata della curva animazione. L'impostazione predefinita è "facilità".	3
Animazione di ritardo	Quando un'animazione prestabilito inizia. Il valore di default è 0.	3
Animazione-iterazione count	numero prestabilito di volte in cui viene riprodotto l'animazione. Il valore predefinito è 1.	3
Animazione-direzione	Se le disposizioni di animazione per giocare in senso inverso al ciclo successivo. L'impostazione predefinita è "normale".	3
Animazione-play-stato	Sia le disposizioni del l'animazione è in esecuzione o in pausa. Il valore di default è "in esecuzione".	3

I due esempi seguenti impostate tutte le proprietà di animazione:

Esempi

Eseguire l'animazione MyFirst, impostare tutti gli attributi:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Prova »