Il miglior tutorial transizioni CSS3 Nel 2024, in questo tutorial puoi imparare transizioni CSS3,Supporto per il browser,Come funziona?,Esempi,Esempi,Numero di modifiche,Esempi,Proprietà di transizione,Esempi,Esempi,

transizioni CSS3

transizioni CSS3

CSS3, dobbiamo aggiungere un effetto che può essere convertito da uno stile all'altro tempo, senza l'uso di animazioni Flash o JavaScript. Mouse sopra i seguenti elementi:

Mouse sopra i seguenti elementi:

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.

Come funziona?

CSS3 transizione è un elemento gradualmente passare da uno stile all'altro effetto.

Per ottenere questo, due cose devono essere definiti:

• Voglio aggiungere l'effetto di proprietà CSS
• Specifica la durata dell'effetto.

Esempi

attributo width applicato effetto di transizione, durata di 2 secondi:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

Nota: se non sispecifica un limite di tempo, la transizione non avrà alcun effetto, in quanto il valore di default è 0.

L'effetto cambierà il valore cambia proprietà CSS specificati. Un tipico cambiamento proprietà CSS è il mouse dell'utente su un elemento:

Esempi

Disposizioni quando la sospensione puntatore del mouse (: hover) per l'elemento <div> quando:

div: hover
{
width: 300px;
}

Prova »

Nota: Quando il cursore del mouse per l'elemento, cambia gradualmente il suo stile originale

Numero di modifiche

Per aggiungere più di un effetto dello stile cambiamento, aggiungere attributi separati da virgole:

Esempi

effetti larghezza, altezza, e di transizione ha aggiunto:

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

Prova »

Proprietà di transizione

Nella tabella seguente sono elencate tutte le proprietà di transizione:

I due esempi seguenti impostare tutti gli attributi di transizione:

Esempi

Utilizzare tutte le proprietà di transizione in un esempio:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
}

Prova »

Esempi

E esempi degli stessi effetti di transizione di cui sopra, ma utilizza le proprietà di transizione abbreviate:

div
{
transition: width 1s linear 2s;
/* Safari */
-webkit-transition:width 1s linear 2s;
}

Prova »