css ograniczone transition

Question

Czesc, chce zrobić taki efekt zeby po najechaniu na diva ten robił sie czerowny od razu, a po wyjachaniu myszka powoli wracał do poprzedniego koloru. Czy da sie to zrobic bez js? bo transition  dziala w obie strony. Teraz mam

div:hover

{

background-color:red;

}

i jest wolne zamiana na czerwony i wolny powrot, a ja chce tylko wolny powrot

Co polecacie? css, js, css animacje?

Comments

Możliwości jest wiele, może być css, może być js lub jQuery, jak kto woli. Moim zdaniem najłatwiej w jQuery, ale minus to dołączanie dodatkowej biblioteki do strony, w JavaScript trzeba troszkę pokombinować bo trzeba dołożyć funkcje czasowe, z kolei css animation w starszych przeglądarkach nie będzie działać.
Jak strona ma być lekka to css, a jak nie to jQuery i już :)

Answer 1

.bar {
  transition: .75s ease-in-out 1s;
  background:red;
}
.bar:hover {
  transition: .0s ease-in-out 0s; 
  background:orange;
}

<div class="bar">Lorem Ipsum</div>

Przerobiłem ze stack'a:

https://stackoverflow.com/questions/5921073/different-css-transition-delays-for-hover-and-mouseout
http://jsbin.com/lecuna/edit?html,css,output

Answer 2

Juz rozwiazalem problem div dałem transition długą a div:hover którka