Pour animer la couleur d'arrière-plan sans utiliser d'image - comment animer la sortie

Question

Je voulais un effet de survol où l'arrière-plan d'un lien serait rempli en vol stationnaire et vidé en sortie. La solution que j'ai trouvée jusqu'ici est d'utiliser des images clés pour remplir l'élément en ajoutant des dégradés linéaires.

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

Je suis à mi-chemin, l'animation fonctionne sur le vol stationnaire, mais je ne l'ai pas trouvé un moyen d'inverser la animation à la sortie.

Quelqu'un sait comment y parvenir? Et aussi, s'il y a un moyen plus simple d'accomplir la première étape, je serais heureux de l'apprendre.

Merci.

Answer 1

J'ai essayé d'écrire du nouveau code sur votre solution mais c'était trop mauvais pour le gérer alors je le laisse à quelqu'un d'autre .. Mais j'ai réussi à résoudre l'animation avec le fonctionnement de votre code ... ce que je faisais était juste créer une autre image clé lorsqu'ils ne sont pas en vol stationnaire .. (sur la balise) avec la même animation que vous les attributs utilisés ...

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

puis je fait une nouvelle image clé exactement comme le vôtre, mais à l'envers. ..

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

Espérons que cela a aidé! voici un violon de travail aussi: http://codepen.io/anon/pen/pREadY