Анимированный цвет фона без использования изображения - как анимировать выход

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

Я попытался написать какой-то новый код на вашем решении, но было слишком плохо, чтобы управлять им, поэтому я оставляю это кому-то другому. Но мне удалось решить анимацию назад с тем, как работал ваш код ... So то, что я сделал, было просто создать еще один ключевой кадр, когда не зависание .. (на теге) с той же анимацией атрибутов вы использовали ...

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