June 12
A differenza di animazioni, transizioni CSS animano le modifiche tra predefinito e si librano stati di elementi della pagina Web. Lo stato hover è simile ad un rollover, un elemento di una pagina che cambia quando un utente "libra" suo mouse su di esso. Le transizioni vengono applicate alle proprietà CSS - colori di sfondo, bordi, dimensioni dei caratteri e altri stili che è possibile impostare - in modo che se c'è una differenza nel modo in cui la proprietà è impostata su una parte della pagina quando un utente passa sopra di esso, piuttosto che un brusco cambiamento, vedrete un graduale cambiamento animato.
1 Aprire il file HTML per la pagina Web in un editor di codice o Blocco note. Trova l'elemento in cui si desidera applicare una transizione a un fondo, ad esempio un'immagine, campo div o modulo:
<Div id = "transition_me">
Content qui ...
</ Div>
Verificare che il tag ha un nome ID e prendere nota di esso per dopo. Se il tag non dispone di un ID, aggiungerne uno come indicato sopra.
2 Aprire il file CSS vostra pagina Web utilizza come il suo foglio di stile. Se la pagina non utilizza un file CSS, è possibile aggiungere i CSS tra una coppia di "<style>" tag nella testa del codice HTML:
<Head>
<Title> Il titolo della pagina Qui </ title>
<Style type = "text / css">
<! - Codice CSS va qui ->
</ Style>
</ Head>
In questo esempio, i tag circostanti "codice CSS va qui" fanno si che il testo di un commento che il browser non legge.
3 Scrivi una regola di stile che seleziona l'elemento dal suo ID. Effettuare una seconda regola di stile che seleziona l'elemento dal suo ID solo quando l'utente si posiziona su di esso:
transition_me {
}
transition_me: hover {
}
Gli stili definiti all'interno della prima regola di stile sono ora gli stili predefiniti dell'elemento. Quando l'utente passa il mouse su quell'elemento, il browser sembra la regola con ": hover" per applicare stili diversi.
4 Impostare una proprietà e un valore entro la prima regola di stile:
transition_me {
background-color: azzurro;
}
In questo esempio si utilizza la proprietà "background-color". Altre proprietà dello sfondo includono background-image, background-size, background-repeat e background-position. È possibile passare una di queste proprietà.
5 Impostare lo sfondo cambiato nella regola secondo stile:
transition_me: hover {
background-color: blu scuro;
}
Finora, quando l'utente passa sopra il div "transition_me", il div si trasforma dal celeste al blu scuro, senza una transizione.
6 Applicare una transizione a una proprietà entro la prima regola di stile. La proprietà CSS è "transizione" e ci vogliono due valori: il nome della proprietà che si desidera utilizzare l'effetto di transizione su e la velocità della transizione. Se si vuole passare il colore di sfondo del div, di questo codice:
transition_me {
background-color: azzurro;
transizione: 5s background-color;
}
velocità di transizione è specificato in secondi.
7 Duplicare la proprietà "di transizione" e dei suoi valori tre volte. Aggiungere un prefisso browser per ogni duplicato, come mostrato:
transizione: 5s background-color;
-moz-transizione: 5s background-color;
-webkit-transizione: 5s background-color;
-o-transizione: 5s background-color;
Al momento della stesura di questo articolo, le transizioni richiedono prefissi del browser. Anche se non è ancora funzionale, "transizione" senza prefisso assicura che il vostro codice funzionerà nei browser più tardi che sosterranno questo. A partire dalla data di pubblicazione, il supporto per le transizioni si trova in Firefox, Chrome, Safari e Opera, anche se Opera sfuma lo sfondo in un primo momento quando si carica la pagina.