CSS3 Animation on Link Hover not working properly - html

Question

Background:
Trying to create an esthetically pleasing linking hover for the future
Current JSFiddle:
Available here for FF Browser.
body {
color:#ffffff;
font-family:"Helvetica";
font-size:12pt;
background-color:#000000;
font-weight:bold;
}
a:link {
color:white;
text-decoration:none;
}
a:hover {
animation: myhover 1s;
transition-timing-function: ease-in-out;
font-weight: bold;
}
#keyframes myhover {
from {
background-color: black;
color: white;
}
to {
background-color: white;
color: black;
}
}
Problem:
The transition works in what concerns the effect, but for some reason, even if you remain with the cursor on top of the link, it reverts to the FROM state without even a fade back from TO to FROM.
Need:
What code change is needed to stay at TO effect, until you take the cursor out of the hovered LINK and it reverts the effect to FROM?
Code type restrictions:
I do not wish to use JavaScript or JQuery in the solution, only CSS and HTML.
Many Thanks
Alban

Answer 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/

Answer 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:
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.
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