Hi DP. Thank you for your time, I have a question, i want to make slow transition hover using css : my css code so far is like this : .logo{ background-image:url(images/logo.png); transition-duration:1s; transition-timing-function:linear; } .logo:hover { background-image:url(images/logo2.png); } the code working properly in PC, but cant working on MAC.., Do i miss something? Thank you in advance.., Best regards, Ridwan Sugi
Try using -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; HTML:
As @Noticed said above, you'll have to use different vendor prefixes. This is also true for a number of CSS3 properties. A side note: try to condense your CSS properties. It's really helpful on the long run.
Hi.., Thank you so much for the input.., I have try with this css .., .logo{ background-image:url(images/logo.png); -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .logo:hover { background-image:url(images/logo2.png); -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } Working well with PC, but still cant solve the MAC problem.., Best regards, Ridwan Sugi
Silly question: What browser on the Mac. Saying "the mac" is pretty vague. I mean if you're talking something like iCab or IE 5.2 you're SOL. (**** outta luck). The above should work in any 'real' browser. Though as of the past year you no longer need to say -moz or -o since both browser makers have said "to hell with browser prefixes" as has Google. (though that last one is still 'in the works') Though there is no such thing as a transition for a change in background-image in ANY browser, so what ELSE are you trying to do on hover?!? (Much less what would that be doing on PC that not having the transitions wouldn't?!?)
By the way @OP, that's a nasty example of redundancy you have there. .logo{ background-image:url(images/logo.png); -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .logo:hover { background-image:url(images/logo2.png); -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } Code (markup): This above is functionally identical to this : .logo{ background-image:url(images/logo.png); -webkit-transition:all 0.2s ease-in-out; -moz-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; -o-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .logo:hover { background-image:url(images/logo2.png); } Code (markup):
That I'd simplify down even further thanks to certain browser makers FINALLY getting with the program. .logo{ background-image:url(images/logo.png); -webkit-transition:all 0.2s ease-in-out; -ms-transition:all 0.2s ease-in-out; transition:all 0.2s ease-in-out; } .logo:hover { background-image:url(images/logo2.png); } Code (markup): Though again, NOT that those transition declarations should actually be doing anything since you aren't declaring any VALID values transition is supposed to do operations on. http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#animatable-css Notice that background-image is NOT on the list of values that have transitions... so what exactly are you expecting it to do (and what browser on PC is actually doing anything?!?)
Oh, and if that's the site logo why does it have a class? (lemme guess, non-semantic markup? No graceful degradation?)