CODEWITHSUNDEEP
htmlcsscss-animations
Alban Lusitanae
Alban Lusitanae

Reputation: 235

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:"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

Upvotes: 1

Views: 3352

Answers (3)

William Hou
William Hou

Reputation: 1781

For me, the animation didn't work for hover because "Animation Starts Too Soon".

The original animation:

    .logo:hover {
       animation: moveInRight 1s ease-out;
    }

the keyframe:

    @keyframes moveInRight {
      0% {
        opacity: 0;
        transform: translateX(100px);
      }

      80% {
        transform: translateX(-10px);
      }

      100% {
        opacity: 1;
        transform: translate(0);
      }
    }

No matter how hard I tried, the logo just shook a little, but it never moved in from the right.

Finally I found the solution: "Animation Starts Too Soon"!😲

So I added a little delay to the animation:

    .logo:hover {
       animation: moveInRight 1s ease-out 0.1s; // 0.1s delay
    }

And then it started to work!

Source of solution: https://blog.hubspot.com/website/css-animation-not-working

Upvotes: 0

Harry
Harry

Reputation: 89780

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

Upvotes: 1

Jack
Jack

Reputation: 9388

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/

Upvotes: 2

Related Questions