画像を使わずに背景色をアニメーションにする方法 - アニメーションを終了する方法

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