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 and noy fa-spin