Le transizioni CSS3 vogliono aggiungere un colore e svanire il tutto

Question

Voglio rendere uno sfondo DIV (che non ha un colore di sfondo) rosso lampeggiante, quindi tornare a vuoto di nuovo. ora ho usato JS per aggiungere una nuova CLASS (che aggiunge il rosso) al DIV in questione e al CSS3 per aggiungere un andamento al colore di sfondo. ma lo allevia IN, quello che voglio è che diventi ROSSO e poi si allinei. Immagino di poterlo fare usando JS per aggiungere più CLass dopo un ritardo. ma è possibile utilizzare CSS3 per fare tutto questo?

Answer 1

Se si desidera qualcosa come un'evidenziazione, si consiglia di utilizzare animazioni CSS3. Non sono supportati nei browser più vecchi. Controlla caniuse per questo.

Ho creato un breve esempio over here.

L'evidenziazione viene richiamata facendo clic sul collegamento. Ecco il CSS (senza prefissi del venditore):

@keyframes highlight { 
    0% { 
    background: red 
    } 
    100% { 
    background: none; 
    } 
} 

#highlight:target { 
    animation: highlight 1s; 
} 

Answer 2

Un modo per farlo è utilizzare il metodo di animazione dell'interfaccia utente jQuery, che estende il jQuery animato() "normale" a effetti come il colore di sfondo.

Transizioni come questa sono possibili in css3, ma ovviamente con un supporto browser non ampio.

#maDiv { 
    -webkit-transition:background-color 0.5s linear; 
    -moz-transition: background-color 0.5s linear; 
    -o-transition: background-color 0.5s linear; 
    height: 20px; 
    width: 20px; 
    background:#000; 
} 

#maDiv:hover { 
    background: #ff0; 
} 

che svanirà il colore quando l'utente passa il Div, e dissolvenza indietro quando il mouse è fuori, oltre 0,5 secondi. Per i dettagli del supporto del browser, vedere "transizione css3" qui: http://www.html5rocks.com/en/features/presentation