web-dev-qa-db-ja.com

Font Awesomeのスピン速度を変更できますか？

私のウェブサイトには、次のコードで表示される回転ギアがあります。

<link rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<i class = "fa fa-cog fa-5x fa-spin"></i>

個人的には、ギアの速度が速すぎると思います。 CSSで変更できますか？

htmlcssanimationcss-animationsfont-awesome
41
FlipFloop

短い答え

はい、できます。独自のアニメーションルールを使用して、アイコンの.fa-spinクラスを新しいクラスに置き換えます。

.slow-spin {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}
<link rel="stylesheet"
 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

<i class = "fa fa-cog fa-5x slow-spin"></i>

より長い答え

Font Awesome CSS file を見ると、アニメーションの回転に関する次のルールがあります。

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

.fa-spinクラスのルールは、fa-spinキーフレームを参照します。

@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

別のクラスで同じキーフレームを使用できます。たとえば、.slow-spinというクラスに対して次のルールを記述できます。

.slow-spin {
  -webkit-animation: fa-spin 6s infinite linear;
  animation: fa-spin 6s infinite linear;
}

これで、選択した速度でHTML要素を回転できます。クラス.fa-spinを要素に適用する代わりに、.slow-spinクラスを適用します。

<i class = "fa fa-cog fa-5x slow-spin"></i>
72
Michael Laszlo

独自のアニメーションまたはクラス定義を使用する必要はありません。 CSSアニメーションの速度は、 animation-duration cssプロパティによって制御できます。単に使用します：

.fa-spin {
  animation-duration: 3s; // or something else
}

値が大きいほど、アニメーションの速度は遅くなります。

9
RWAM

Michael Laszloの答えに似ています。これは、デフォルトでfa-spinが非常に遅いため、fa-refreshの高速化に使用するものです。

.fa-spin {
 -webkit-animation: fa-spin 0.75s infinite linear !important;
 animation: fa-spin 0.75s infinite linear !important;
}

！importantを使用して、特異性を制御します:)

2
deepakssn