Question

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

Answer 1

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.