Animating background colour without using image – how to animate exit

Question

I wanted a hover effect where the background of a link would be filled on hover and emptied on exit. The solution I've come up with so far is using keyframes to fill the element by adding linear gradients stop motion style.

HTML

<p>Lorem ipsum dolor <a href="#">sit amet</a>, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no <a href="#">sea takimata sanctus</a> est Lorem ipsum dolor sit amet. </p>

SCSS

$hovercolor:goldenrod;

a {
  text-decoration: none;
  color: black;
  border-bottom: 3px solid $hovercolor;
  background: white;
  &:hover {
    animation-name: hoveranimate;
    animation-duration: .1s;
    animation-fill-mode: forwards;
  }
}

@keyframes hoveranimate {
  0% {
    background: linear-gradient(white, white 100%, $hovercolor 80%, $hovercolor);
  }
  10% {
    background: linear-gradient(white, white 90%, $hovercolor 70%, $hovercolor);
  }
  20% {
    background: linear-gradient(white, white 80%, $hovercolor 60%, $hovercolor);
  }
  30% {
    background: linear-gradient(white, white 70%, $hovercolor 50%, $hovercolor);
  }
  40% {
    background: linear-gradient(white, white 60%, $hovercolor 40%, $hovercolor);
  }
  50% {
    background: linear-gradient(white, white 50%, $hovercolor 30%, $hovercolor);
  }
  60% {
    background: linear-gradient(white, white 40%, $hovercolor 20%, $hovercolor);
  }
  70% {
    background: linear-gradient(white, white 30%, $hovercolor 20%, $hovercolor);
  }
  80% {
    background: linear-gradient(white, white 20%, $hovercolor 10%, $hovercolor);
  }
  90% {
    background: linear-gradient(white, white 10%, $hovercolor 0%, $hovercolor);
  }
  100% {
    background: linear-gradient(white, white 0%, $hovercolor 0%, $hovercolor);
  }
}

http://codepen.io/snuts/pen/NdrrXN

So I'm halfway there, the animation works on hover, but I've not worked out a way to reverse the animation on exit.

Anyone know a way to achieve this? And also, if there is a simpler way to achieve the first step I'd be happy to learn it.

Thanks.

Answer 1

I tried to write some new code on your solution but was too bad to manage it so i leave that to somebody else.. But i did manage to solve the animation back with the way your code worked... So what i did was to just create another keyframe when not hovering.. (on the a tag) with the same animation attributes you used ...

a{
animation-name:hoverout;
animation-duration: .1s;
animation-fill-mode: forwards;
}

and then i made a new keyframe exactly like yours but backwards...

@keyframes hoverout {
100% {
background: linear-gradient(white, white 100%, $hovercolor 80%, $hovercolor);}
90% {
background: linear-gradient(white, white 90%, $hovercolor 70%, $hovercolor);}
80% {
background: linear-gradient(white, white 80%, $hovercolor 60%, $hovercolor);}
70% {
background: linear-gradient(white, white 70%, $hovercolor 50%, $hovercolor);}
60% {
background: linear-gradient(white, white 60%, $hovercolor 40%, $hovercolor);}
50% {
background: linear-gradient(white, white 50%, $hovercolor 30%, $hovercolor);}
40% {
background: linear-gradient(white, white 40%, $hovercolor 20%, $hovercolor);}
30% {
background: linear-gradient(white, white 30%, $hovercolor 20%, $hovercolor);}
20% {
background: linear-gradient(white, white 20%, $hovercolor 10%, $hovercolor);}
10% {
background: linear-gradient(white, white 10%, $hovercolor 0%, $hovercolor);}
0% {
background: linear-gradient(white, white 0%, $hovercolor 0%, $hovercolor);}
}

Hope this helped! here is a working fiddle too: http://codepen.io/anon/pen/pREadY