Search code examples
csswebkit-animation

Using a Third Party Keyframes Definition

Font Awesome includes a spin animation for elements with the class fa-spin. Inspection of the CSS shows that a spinning elementis implemented using a keyframes definition again called fa-spin.

Rather than define a new animation, I want to use this existing one in a hover selector.

i.fa-gear:hover {
  -webkit-animation: fa-spin 2s infinite linear;
}

But it simply doesn't work.

Here's an example in a JSBin.

At first I thought it was because JSBin imported the CSS section before the Font Awesome rules were defined, but that doesn't appear to be the case.

Solution

  • but you are using the class, that is defined as

    .fa-spin {
    -webkit-animation: spin 2s infinite linear;
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear
}

    so the keyframes name is spin and noy fa-spin