Come posso animare gli stili dei campi di testo quando ricevono il focus?

Le transizioni CSS, non supportate attualmente solo da IE9 ed inferiori, ci permettono di creare effetti visuali quando un elemento modifica il suo stato come risultato dell'interazione utente.

La soluzione consiste nel registrare una transizione sugli input di tipo testo e quindi modificarne gli stili sullo stato :focus:

input[type="text"] {
	background: #fff;
	transition: all 400ms ease-in;
}

input[type="text"]:focus {
	background: #fafafa;	
}