【Font Awesome】アニメーションをカスタマイズする

fa-spinの回転を遅くしたり，fa-pulseのステップ数を変えたり…． こいつらは単にfa-spinというkeyframeで角度を0deg~359degに変えてるだけなので，それを利用すればOK．

/* scss/_animated.scss#L4 */
.#{$fa-css-prefix}-spin {
  -webkit-animation: fa-spin 2s infinite linear;
          animation: fa-spin 2s infinite linear;
}

.#{$fa-css-prefix}-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
          animation: fa-spin 1s infinite steps(8);
}

たとえばこんな感じ．

// 遅いやつ
.#{$fa-css-prefix}-spin-slowly {
  -webkit-animation: fa-spin 3s infinite linear;
          animation: fa-spin 3s infinite linear;
}