使用第三方关键帧定义

Question

Font Awesome 包括带有 class fa-spin 的元素的旋转动画。检查 CSS 表明旋转元素是使用关键帧定义实现的，再次称为 fa-spin。

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

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

但这根本行不通。

这是 JSBin 中的示例。

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

Answer 1

但您使用的 class，定义为

.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

使用第三方关键帧定义

Using a Third Party Keyframes Definition

css

webkit-animation