css - 使用第三方关键帧定义

Question

Font Awesome 包含一个用于类元素的旋转动画fa-spin。对 CSS 的检查表明，一个旋转元素是使用再次称为 的关键帧定义实现的fa-spin。

我不想定义一个新的动画，而是想在悬停选择器中使用这个现有的动画。

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

但这根本行不通。

这是JSBin中的一个示例。

起初我认为这是因为 JSBin 在定义 Font Awesome 规则之前导入了 CSS 部分，但事实并非如此。

Answer 1

但是您正在使用该类，该类定义为

.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
}

所以关键帧的名字是spin和 noy fa-spin