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

Question

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

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

希望对您有所帮助！这也是一个有效的 fiddle：http://codepen.io/anon/pen/pREadY

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

Animating background colour without using image – how to animate exit

mouseout

css-animations