Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS3 Transform not applying to all elements as intended

CSS3 Transform not applying to all <a> elements as intended

Problem

In my header, I have this CSS specified.

a:link {
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color:#3462D6;
}

a:visited {
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color:#3462D6;
}

a:hover {
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color:#82D1F7;
}

a:active {
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    color:#3462D6;  
}

a {
    text-decoration: none;
}

For most of the links, the transitions are working, however links that I have visited do not play the animation in Chrome (And I would assume other webkit browsers as well) Within Firefox however, all links do the transition animation just fine.

What could be the cause of the links not transitioning in Chrome? The url is http://www.fuyuri.com

Problem courtesy of: but2002

Solution

Move the active state above the hover state. - link, visited, active, hover, focus and you need to apply the transitions to all states. Transitions are not inherited.

Solution courtesy of: Metis

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS3 Transform not applying to all elements as intended

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×