Subscribed unsubscribe Subscribe Subscribe

Augmented Usamimi

it { is_expected.to be_blog.written_by(izumin5210) }

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

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