フリーアイコン「Font Awesome」の使い方：ステップ５～Web Fonts with CSS編その２

 <i class="myfa-spin fas fa-car-crash"></i>
 

 .myfa-spin{animation: myfa34a-spin 2s infinite linear;}
 @keyframes myfa34a-spin{
	0%{transform: rotate(0deg);}
	100%{transform: rotate(360deg);}
 } 

3.5 CSSアニメーションで使うプロパティの詳細

　CSSアニメーションのプロパティは、様々な値のものが多いです。ここではその値を詳しく見ていきたいと思います。

3-5-1. animationプロパティ

　animationプロパティは、CSSアニメーションで使う8個のプロパティを一括して指定します。必ずすべてを指定する必要はなく、指定しない場合は既定値が採用されます。ただ、animation-name（キーフレームリスト名） と animation-duration（所要時間）は必須です。また、それぞれのプロパティで個別に値を指定しても構いません。一括指定の場合の並び順ですが、単位が同じ animation-duration と animation-delay を除いて自由です。順番は、animation-duration が必ず先です。animation-name がどれかのプロパティの値と同じ文字列の場合も無効です。一括・個別の指定例と既定値は以下の通りになります。

 .anime-ikkatu{
 /* 一括設定 */	
    animation: kfs-name 2s;
 }
 .anime-kobetu{
 /* 個別設定       既定値 */
    animation-name: none;
    animation-duration: 0s;
    animation-timing-function: ease;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 0s;
    animation-fill-mode: none;
    animation-play-state: running;
 }
 @keyframes kfs-name {
   0% {fontisize: 1em;}
   33% {fontisize: 2.7em;}
   82% {fontisize: 3.4em;}
   100% {fontisize: 1em;}
 } 

3-5-2. animation-nameプロパティ

　animation-name プロパティには、 @keyframes のキーフレームリスト名（キーフレーム識別名）を指定します。キーフレームリスト名を指定しないとアニメーション機能は停止します。既定値は「 none 」です。

3-5-3. animation-durationプロパティ

　animation-duration プロパティには、アニメーションの開始から終了までの所要時間を指定します。指定には、秒またはミリ秒の単位である s または ms が必要です。既定値は、0s です。

3-5-4. animation-timing-functionプロパティ

　animation-timing-functionプロパティには、イージング、つまりアニメーションの滑らかさを指定します。ベジェ曲線系の値とステップ系の値に分けられます。

「ベジェ曲線系」：cubic-bezier(p1, p2, p3, p4) に４値を入れることで、ベジェ曲線を自由に指定できます。ベジェ曲線は、illustrator や inkscape などペンツールをお使いの皆さんにはお馴染みのアレですね。ベジェ曲線の勾配がアニメーションの滑らかさになります。特徴的な曲線には、 ease、linear など名前が付けられています。既定値は、ease です。

「ステップ系」：動きがカクカクに見えるようなアニメーション。ステップ数(自然数)と、(0%)フレーム・(100%)フレームを含めるかどうかの値の二つを指定します。 animation-timing-functionプロパティに、steps( n , [飛び] ) を指定します。[飛び]を省略した場合は、(0%)フレームが飛ばされます。[飛び]の値は表のとおりです。

　[飛び]は例えばキーフレームで
0%{ transform: rotate(0deg);}
100%{ transform: rotate(360deg);}
と、表示される画像が同じであった場合、アニメーションの繰り返し時に(100%)フレームと次の(0%)フレームの重複を避けるためにフレームを飛ばす役割を果たします。

3-5-5. animation-delayプロパティ

　animation-delay プロパティには、アニメーションが始まる瞬間からの時間のずれ、オフセット時間を指定します。正の数を指定すると例えば、5s だと5秒後にアニメーションが開始されます。負の数を指定すると例えば、2s だと2秒前にアニメーションが開始された前提で、2秒過ぎたフレームから始まります。指定には、秒またはミリ秒の単位である s または ms が必要です。既定値は、0s です。

3-5-7. animation-directionプロパティ

　animation-direction プロパティには、再生の向きを順方向、逆方向、行ったり来たり、来たり行ったりの４通りのうち、いずれかを指定します。既定値は、normal です。

3-5-8. animation-fill-modeプロパティ

　animation-fill-mode プロパティには、アニメーション開始時とアニメーション終了時に表示されるキーフレームを指定します。表示されるのは、通常画像・(0%)フレーム・(100%)フレームのいずれかです。none の場合は、キーフレームは選択されずに通常画像が表示されます。再生方向が順方向の場合は下表の通りです。再生方向が逆だと表示されるキーフレームは、0% と 100% が逆になります。再生方向が行ったり来たり方向だとそのときの再生方向で表示されるキーフレームが決まります。既定値は、none です。

3-5-9. animation-play-stateプロパティ

　animation-play-state プロパティでは、アニメーションが実行中か、または停止中かを指定します。停止した後に実行すると、停止した位置からアニメーションが再生されます。既定値は、running です。

４．おわりに・・・３次元の回転を少し

　今回、自動車をくるくる回したアニメーションのキーフレームは、２次元時計回りの回転が基本でした。これを次のように書き換えると３次元の回転になります。xyz 軸のそれぞれの方向に何度回すかを指定するだけです。90度、180度、360度の倍数で設定してやると区切りのよい回転になります。

コード表示

 <i class="myfa-spin fas fa-car-crash"></i> 

  .myfa-spin{
   font-size: 3em;
   animation: kfs 10s infinite linear;
 }
 @keyframes kfs{
  0% {transform: rotateX(180deg) rotateY(3600deg) rotateZ(-180deg); }
  100% {transform: rotateX(-180deg) rotateY(0deg) rotateZ(180deg); } 
 } 

　３次元回転をSVG画像に埋め込んでみました。