Avatar of stargateatlantis
stargateatlantis asked on

css3 transitions

When you hover over the object it will fade lighter.  But when you hover out it doesn't do a nice transition how would you do transition of hover out of the object

Here is a link to the code

http://bit.ly/1bf9q2q
CSS

Avatar of undefined
Last Comment
Kyle Hamilton

8/22/2022 - Mon
Scott Fell

I could not get it to work with jsfiddle but in jsbin http://jsbin.com/iJUpagEv/1/edit?html,css,output it seems to work.  How does it work on your own site?
ASKER CERTIFIED SOLUTION
Kyle Hamilton

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
COBOLdinosaur

You just use a transition both direction:

.someclass {background-color:rgba(0, 0, 0, 0);
                    transition:background-color 2s ease;}

.someclass:hover {background-color:rgba(0,0, 0, 1);
                    transition:background-color 2s ease;}

You probably don't need the hyphen hack.  Chrome has supported it natively for the last 5 version; firefix for the last 9 versions and AFAIK there was never an implementation of the -ms- version and IE supports transitions since IE9.

Cd&
Kyle Hamilton

CD&,

not sure what you mean by both directions. The code I posted transitions in and out. you don't need the transition rule on the :hover. that doesn't make sense. The transition applies to the element, then what ever happens to that element (ie: the hover) gets transitioned according to the transition rule on the element.

as far as -ms-, that was just automatic typing. If it's not needed, that's great. Personally, I don't really care much about IE, and don't spend too much time worrying about what works in IE and what doesn't doesn't.
Your help has saved me hundreds of hours of internet surfing.
fblack61