Przejścia CSS3 chcą dodać kolor i zaniknąć.

Question

Chcę, aby tło DIV (które nie ma koloru tła) zabarwiło się na czerwono, a następnie ponownie je wyzerowałem. teraz użyłem JS, aby dodać nowy CLASS (który dodaje czerwony) do DIV, o którym mowa, i CSS3, aby dodać luzowanie do koloru tła. ale to łagodzi. W tym, co chcę, to przejść na RED, a następnie złagodzić. Sądzę, że mógłbym to zrobić, używając JS do dodawania wielu CLASS po opóźnieniu. ale czy CSS3 może być użyty do tego w całości?

Answer 1

Jeśli chcesz coś podświetlić, możesz użyć animacji CSS3. Nie są one obsługiwane w starszych przeglądarkach. Sprawdź to dla caniuse.

Stworzyłem krótki przykład: over here.

Podświetlenie jest wywoływane po kliknięciu łącza. Oto CSS (bez prefiksów dostawcy):

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

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

Answer 2

Jednym ze sposobów na to jest użycie metody anime jQuery UI, która rozszerza "normalne" jQuery animate(), aby wpływać na takie rzeczy jak kolor tła.

Przejścia takie jak to jest możliwe w css3 do, ale oczywiście z nie tak szeroką obsługą przeglądarki.

#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; 
} 

To znikną kolor, gdy użytkownik najedzie div i zanikać ją z powrotem, gdy wskaźnik myszy znajduje się w ciągu 0,5 sekundy. Aby uzyskać szczegółowe informacje dotyczące obsługi przeglądarki, zobacz "Przejście css3" tutaj: http://www.html5rocks.com/en/features/presentation