Css3 Animation On Link Hover Not Working Properly

Background: Trying to create an esthetically pleasing linking hover for the future Current JSFiddle: Available here for FF Browser. body { color:#ffffff; font-family:'Helve

Solution 1:

There are two parts to your question:

1) How do you retain the current animation state?

Add animation-fill-mode to your CSS rule:

a:hover {
    -webkit-animation: myhover 1s;
    animation: myhover 1s;
    transition-timing-function: ease-in-out;
    font-weight: bold;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

2) How do you revert to the "From" transition

Fairly straight forward - you set the "default" animation properties of the link.

a:link {
    -webkit-animation: nohover 1s;
    animation: nohover 1s;
    color:white;
    text-decoration:none;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

The only issue you might run into is the page load. You'll notice the animations kick off before any interaction occurs (for -webkit-based-browsers). Without JavaScript, you'll need to consider this and how your animations will look.

A fiddle for demonstration: http://jsfiddle.net/6hxhxg5t/

Solution 2:

You need to set the animation-fill-mode to forwards for the animation to retain the state as at its last keyframe.

animation: myhover 1s forwards;

or

animation-name: myhover;
animation-duration: 1s;
animation-fill-mode: forwards;

Option 1 Demo | Option 2 Demo

Note:

1. The demo uses -webkit- prefix as I am testing on Chrome, but the same would work with either the -moz- prefix or without any prefixes.
2. Achieving a reverse effect on hover out would not be possible without adding extra code as animation do not work like transition. The reverse effect would be better achieved with JavaScript/jQuery as the reverse animation cannot be kicked-off by default on the base class without it appearing once on page load also. Here is a way to achieve both the forward and reverse animation effects using jQuery. jQuery is not a must and the same can be done with vanilla JS also but I just used jQuery for doing a quick sample.

---

Option 3: (Using transtions instead of animations)

If your objective is only to linearly change the background-color and the color properties on mouse hover, then actually transition is a much better option to make use of instead of animation. Transitions can automatically answer both of your concerns. It can make the end state retained till the mouse is hovered out and the hover out will also cause the reverse effect to happen.

a:link {
    color:white;
    text-decoration:none;
    transition: background-color 1s, color 1s;
    /*transition: all 1s;*//* use this line if you wish to transition all properties */transition-timing-function: ease-in-out;    
}
a:hover {
    font-weight: bold;
    background-color: white;
    color: black;
}

Option 3 Demo