Font awesome gradient animation on hover

Question

When a icon font awesome is hovered, I want the color gradient to animate.

I have tried the following code but is not working:

Code pen: https://codepen.io/anon/pen/exoQmp

What is wrong with my code?

.awesome-gradient {

    background: linear-gradient(-45deg, red, blue);
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

  &:hover {
  animation: gradient 10s ease infinite;
  }
}

@keyframes gradient {
  50% {
    background-position: 100% 0;
  }
}

I followed and referenced a button tutorial but not applying to the icons.

For one, your CodePen settings are wrong. You've written `SCSS` but don't have it enabled in your example. — Andy Hoffman, Feb 21 '19 at 01:48

score 1 · Accepted Answer · answered Feb 21 '19 at 02:34

Animate a background: linear-gradient(... is basically the same than trying to animate a background-image by playing with its position, which mostly ends in unwanted flickering issues.

Instead, you can have two backgrounds and swap them on hover via opacity. Notice in the example I've used a mixin for reusing it (inserts an :after pseudoelement and supports a $content parameter so you can provide the FontAwesome icon code).

See it here: https://codepen.io/cdtapay/pen/NommGN

Font awesome gradient animation on hover

1 Answers1