Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!


Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 




From the folks who brought you High Rankings!

- - - - -

Css3 Transitions

  • Please log in to reply
1 reply to this topic

#1 scouseflip


    HR 4

  • Active Members
  • PipPipPipPip
  • 205 posts
  • Location:North West, England

Posted 20 January 2011 - 11:51 AM

Hi All

I'm redesigning a site and thought I may as well use the opportunity to play with some of the newer stuff in CSS. My first attempt was to get a link hover colour change to fade in using -webkit-transition. My code is:

    -webkit-transition: color 1s ease-out;
    -moz-transition: color 1s ease-out;
    -o-transition: color 1s ease-out;


So my default link color is #776276 (purple), the hover colour is #000 and on hover the transition works fine. BUT when the page first loads, the links appear in the Blue default browser colour first, then fade into my purple link text... Any idea's why this is happening?

Strangely the same effect applied to my main menu does not experience the same problem, only difference is that the menu has an overriding style in the CSS file:

#topMenu a
    border-right:solid 1px #999;
    padding:8px 0px 0px 0px;

#topMenu a:hover

BTW - test page that shows this problem (when using Chrome) is www.justdine.com/jdnew/default.aspx



#2 chrishirst


    A not so moderate moderator.

  • Moderator
  • 7,718 posts
  • Location:Blackpool UK

Posted 22 January 2011 - 11:37 AM

Works ok for me but in FF the "Summer Sale" banner image is over the menu on the left rather than on the right side

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

We are now a read-only forum.
No new posts or registrations allowed.