在不使用图像的情况下为背景颜色设置动画 - 如何为退出设置动画

Question

我想要一个悬停效果，其中链接的背景将在悬停时填充并在退出时清空。 到目前为止，我提出的解决方案是使用关键帧通过添加线性渐变定格动画样式来填充元素。

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

所以我到了一半，动画在悬停时工作，但我还没有找到一种方法来反转退出时的动画。

有人知道实现这一目标的方法吗？而且，如果有更简单的方法来实现第一步，我很乐意学习它。

谢谢。

Answer 1

我尝试在您的解决方案上编写一些新代码，但管理起来太糟糕了，所以我把它留给了其他人。但我确实设法用您的代码工作方式解决了动画... 所以我所做的只是在不悬停时创建另一个关键帧..（在 a 标签上）具有您使用的相同动画属性...

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

然后我做了一个新的关键帧，和你的一模一样，但是倒过来了……

@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);}
}

希望这有帮助！这也是一个工作小提琴：http://codepen.io/anon/pen/pREadY