Using a Third Party Keyframes Definition

Question

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.

Curiously, is this happening because the CSS isn't live? Not sure if it's pulling the styling through on the bin, probably be the same for local. I know that if you take the CSS stylesheet code across directly the 'fa-spin' class will work and spin then. Apologies for my deleted answer, I jumped the gun a bit. — Joe Corby, Apr 22 '15 at 08:32

score 1 · Accepted Answer · answered Apr 22 '15 at 08:50

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

Using a Third Party Keyframes Definition

1 Answers1