Question

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

HTML

onStartCommand()

SCSS

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

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

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

不使用图像动画背景颜色 - 如何设置退出动画

1 个答案: