Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css3 transition: different time value when :hover In than Out?

Basically i am trying to have different transition time when the item is hovered than when the item is mouse leaved,

#bar{ position:fixed; bottom:-25px; }  /*here you only get to see a piece of the bar    */

#bar:hover{ transform: .2s linear; bottom:0; }

And something like

/*this only represents my made out status to cover what i need*/
#bar:mouseLeaved{ transform: 2s linear }

This way it would take .2 seconds to be shown and 2 seconds to be hidden

Can i do this with no need of javascript?

like image 240
Toni Michel Caubet Avatar asked Dec 27 '22 07:12

Toni Michel Caubet


1 Answers

I'd suggest this:

#bar { transition: 2s linear; }
#bar:hover { transition: .2s linear; }

And, let the ordering of the CSS handle things for you when :hover is in effect (it will override the other).

Working demo here: http://jsfiddle.net/jfriend00/Hufxa/

like image 112
jfriend00 Avatar answered May 01 '23 13:05

jfriend00