CSS Webkit Transition - Fade out slowly than Fade in
Just redifine your transition in the over pseudo element.
.box{
background: white;
-webkit-transition: background 5s;
}
.box:hover{
background: olive;
-webkit-transition: background 1s;
}
Look my http://jsfiddle.net/DoubleYo/nY8U8/
Related videos on Youtube
Adam Halasz
Hi, I made 37 open source node.js projects with +147 million downloads. Created the backend system for Hungary's biggest humor network serving 4.5 million unique monthly visitors with a server cost less than $200/month. Successfully failed with several startups before I turned 20. Making money with tech since I'm 15. Wrote my first HTML page when I was 11. Hacked our first PC when I was 4. Lived in 7 countries in the last 4 years. aimform.com - My company adamhalasz.com - My personal website diet.js - Tiny, fast and modular node.js web framework
Updated on July 29, 2020Comments
-
Adam Halasz almost 4 years
This is what I have:
.box{ background:#FFF; -webkit-transition: background 0.5s; } .box:hover{ background:#000; }
But this appends to both onmouseover and onmouseout actions, but isn't there a way to control them? Something like:
-wekbkit-transition-IN: background 1s; -webkit-transition-OUT: background 10s;