１. ステップ６～Web Fonts with CSS編その３
いよいよ Font Awesome Animation です。16種類のアニメーションクラスが用意されているので順番に見ていきます。
(注）古いブラウザでは、CSSの設定がうまく反映されない場合があります。その対策として、ベンダープレフィックスというのがあるのですが、当ページでは説明を省略します。
このページの内容が難しいと感じた方は、まずはステップ５をご覧ください。
２．transform プロパティ
Font Awesome Animation に限らず、CSSアニメーションでは、transform プロパティは良く登場するのでここで取り上げておきたいと思います。transform プロパティの場合は、動かす対象のHTML要素を「インラインブロック display: inline-block;」に指定してください。でないと動きません。ブロック指定でもよいですが、このように行全体が派手に動く場合もあるので注意してください。
Font Awesome のアイコンの場合は、fas、far、fab クラスでインラインブロック指定されているので不要ですが、例えば複数のアイコンをまとめて動かしたいなどの場合は、親となるHTML要素をインラインブロックを指定してください。
transform プロパティには、translate（移動）、rotate（回転）、scale（拡大縮小）、skew（傾斜）の４種類の関数があります。重要です。
| プロパティ名 | 関数名 | 関数名2 | 説明 |
|---|---|---|---|
| transform | translate 移動 | translate | XY軸(x,y) |
| translateX | X軸(x) | ||
| translateY | Y軸(y) | ||
| translateZ | Z軸(z) | ||
| translate3d | XYZ軸(x,y,z) | ||
| rotate 回転 | rotate | XY軸 | |
| rotateX | X軸 | ||
| rotateY | Y軸 | ||
| rotateZ | Z軸 | ||
| rotate3d | XYZ軸 | ||
| scale 拡大縮小 | scale | XY軸 | |
| scaleX | X軸 | ||
| scaleY | Y軸 | ||
| scaleZ | Z軸 | ||
| scale3d | XYZ軸 | ||
| skew 傾斜 | skew | XY軸 | |
| skewX | X軸 | ||
| skewY | Y軸 |
以下の Font Awesome Animation の例で、これらの関数の使い方を取り上げていきます。
３．Font Awesome Animation 前半
3-1. faa-wrench クラス
いきなりですが
.faa-wrench.animated
.faa-wrench.animated-hover:hover
.faa-parent.animated-hover:hover > .faa-wrench
これは Font Awesome Animation の公開ソースなのですが、CSSではあまり見慣れない書き方ですね。
すべて .faa-wrench クラスのサブクラスになっています。 .faa-wrench.animated は、アニメーション実装のサブクラス。これがメインです。2行目はアイコンにマウスオーバーしたときに、3行目はHTML親要素にマウスオーバーしたときに、アニメーションを実装するサブクラスです。３個のクラスが定義されていますが、Font Awesome Animation のクラス宣言はすべてこのパターンです。３個の動作についてはステップ３をご覧ください。
内容は、animation プロパティで値を一括指定する１行と、各々プロパティで値を指定する８行ですが、一括指定と各々指定はどちらか一方だけでOKですが、最初なので両方の値の指定方法をのせました。次に、transform-origin-… が３行続きますが、これは回転の中心点・原点を決めています。
キーフレームは transform プロパティの rotate 関数を使って、反時計に少し回り、時計に少し回り…の繰り返しです。振り子のような動きなのは想像できるかと思います。
<i class="fa-3x fas fa-wrench faa-wrench animated"></i>
/* faa-wrench クラスの原型 */
.faa-wrench.animated,
.faa-wrench.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-wrench {
animation: wrench 2.5s ease infinite;
animation-duration: 2.5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: wrench;
transform-origin-x: 90%;
transform-origin-y: 35%;
transform-origin-z: initial;
}
@keyframes wrench {
0% {transform: rotate(-12deg);}
8% {transform: rotate(12deg);}
10% {transform: rotate(24deg);}
18% {transform: rotate(-24deg);}
20% {transform: rotate(-24deg);}
28% {transform: rotate(24deg);}
30% {transform: rotate(24deg);}
38% {transform: rotate(-24deg);}
40% {transform: rotate(-24deg);}
48% {transform: rotate(24deg);}
50% {transform: rotate(24deg);}
58% {transform: rotate(-24deg);}
60% {transform: rotate(-24deg);}
68% {transform: rotate(24deg);}
75%, 100% {transform: rotate(0deg);}
}
実は、上の transform-origin-x… の３行が効いていません、よね？。アイコンの右斜め上にあるはずの回転軸がアイコンの中心にあります。次のように、transform-origin で値を指定やると回転軸が右斜め上に移動して、レンチでネジを締めている感じがでます。また、faa-wrench クラスでアイコンにスタイリングを施しました。
<i class="fas fa-wrench faa-wrench animated"></i>
.faa-wrench{
font-size: 3em;
color: skyblue;
text-shadow: 0.05em 0.05em 0.05em rgba(0,0,0,0.5);
}
.faa-wrench.animated {
animation: wrench 2.5s ease infinite;
/* transform-origin-x: 90%; */
/* transform-origin-y: 35%; */
/* transform-origin-z: initial; */
transform-origin: 90% 35%;
}
また次例のように、回転軸は width と height を変えることでも調整できます。width と height によってできる長方形の中点が回転軸になるので、background に色を設定すると目で見て調整可能なので楽です。
<i class="fas fa-wrench faa-wrench animated"></i>
.faa-wrench{
font-size: 3em;
color: lightgray;
text-shadow: 0.05em 0.05em 0.05em rgba(0,0,0,0.5);
width: 0.5em;
height: 1.6em;
background-color: rgba(255,0,0,0.2);
}
.faa-wrench.animated {
animation: wrench 2.5s ease infinite;
}
3-2. faa-ring クラス
アニメーションクラスの .faa-ring.animated は定義されているのに、なんで親クラスの .faa-ring がないの？と、疑問をもつかもしれません。faa-ring クラスは空っぽなのです。この例の場合は、fas クラスと fa-bell クラスでアイコンを表示して .faa-ring の代わりをしていることになります。アイコンのスタイリングは、faa-ring クラスでするのがよいです。
キーフレームは、transform プロパティの rotate 関数を使って、反時計に少し回り、時計に少し回り…の繰り返しで振り子の動きです。faa-wrench との違いは、 回転の行き来が速く休止時間が長いことですね。
<i class="fa-3x fas fa-bell faa-ring animated"></i>
/* faa-ring クラスの原型 */
.faa-ring.animated,
.faa-ring.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-ring {
animation: ring 2s ease infinite;
transform-origin-x: 50%;
transform-origin-y: 0px;
transform-origin-z: initial;
}
@keyframes ring {
0% {transform: rotate(-15deg);}
2% {transform: rotate(15deg);}
4% {transform: rotate(-18deg);}
6% {transform: rotate(18deg);}
8% {transform: rotate(-22deg);}
10% {transform: rotate(22deg);}
12% {transform: rotate(-18deg);}
14% {transform: rotate(18deg);}
16% {transform: rotate(-12deg);}
18% {transform: rotate(12deg);}
20%, 100% {transform: rotate(0deg);}
}
faa-wrench 同様、回転軸を transform-origin で修正します。ベルのアイコンがぶら下がった感じで振える様子に変わりました。faa-ring クラスでアイコンのスタイリングをしています。
<i class="fas fa-bell faa-ring animated"></i>
.faa-ring {
font-size: 3em;
color: #fcc800;
text-shadow: 0.05em 0.05em 0.05em rgba(233,188,0,0.8);
}
.faa-ring.animated {
animation: ring 2s ease infinite;
/* transform-origin-x: 50%; */
/* transform-origin-y: 0px; */
/* transform-origin-z: initial; */
transform-origin:50% 0px;
}
こちらの雪だるまは、一番したの真ん中に回転軸を持っていきました。
<i class="fas fa-snowman faa-ring animated"></i>
.faa-ring {
font-size: 3em;
color: deepskyblue;
text-shadow: 0.05em 0.05em 0.05em rgba(0,0,0,0.5);
}
.faa-ring.animated {
animation: ring 2s ease infinite;
transform-origin:50% 100%;
}
3-3. faa-horizontal クラス
faa-horizontal クラスは、 transform プロパティの translate 関数を使っています。translate 関数は移動です。translate( 5px, 0 ) なのでx軸方向、つまり右方向に 5px の平行移動です。その後、translate( 0, 0 ) で元に戻ります。これの繰り返しで右・中央・右・中央と動かしています。左の領域に移動していないのが興味深いです。
<i class="fa-3x fas fa-hand-paper faa-horizontal animated"></i>
/* faa-horizontal クラスの原型 */
.faa-horizontal.animated,
.faa-horizontal.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-horizontal {
animation: horizontal 2s ease infinite;
}
@keyframes horizontal {
0% {transform: translate(0,0);}
6% {transform: translate(5px,0);}
12% {transform: translate(0,0);}
18% {transform: translate(5px,0);}
24% {transform: translate(0,0);}
30% {transform: translate(5px,0);}
36%, 100% {transform: translate(0,0);}
}
x 方向の移動を 5px から translate( 15px, 0 ) にして左右の動きを大きくしてみました。.faa-horizontal にアイコンのサイズと色と影をスタイリングしています。
<i class="far fa-hand-point-left faa-horizontal animated"></i>
.faa-horizontal {
font-size: 3em;
color: #aacf53;
text-shadow: 0.05em 0.05em 0.05em rgba(123,141,66,0.7);
}
.faa-horizontal.animated {
animation: horizontal 5s ease infinite;
}
@keyframes horizontal {
0% {transform: translate(0,0);}
6% {transform: translate(15px,0);}
12% {transform: translate(0,0);}
18% {transform: translate(15px,0);}
24% {transform: translate(0,0);}
30% {transform: translate(15px,0);}
36%, 100% {transform: translate(0,0);}
}
3-4. faa-vertical クラス
faa-vertical クラスは、transform プロパティの translate 関数で上下移動をしています。translate( 0, 3px ) 、translate( 0, -3px ) なのでy軸方向、つまり上下に 3px づつ垂直移動を繰り返しています。
translate( 0, 3px ) = translateY( 3px ) = translate3d( 0, 3px, 0 )
ですね。左右非対称な動きの faa-horizontal と違って、上下対称な動きをしています。
<i class="fa-3x fas fab fa-github-alt faa-vertical animated"></i>
/* faa-vertical クラスの原型 */
.faa-vertical.animated,
.faa-vertical.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-vertical {
animation: vertical 2s ease infinite;
}
@keyframes vertical {
0% {transform: translate(0,-3px);}
4% {transform: translate(0,3px);}
8% {transform: translate(0,-3px);}
12% {transform: translate(0,3px);}
16% {transform: translate(0,-3px);}
20% {transform: translate(0,3px);}
22%, 100% {transform: translate(0,0);}
}
下の例は、テキスト文字も一緒に動かしています。テキスト文字を動かす一番簡単な方法は、<i>～</i> タグ内にテキスト文字を入れる方法です。動いている文字だけを修飾したい場合は、<i>タグ内で<span>タグなど、普段のHTMLのやり方と同様です。
<i class="faa-vertical animated far fa-hand-point-up">
<span class="skyblue"> 今ココ！</span>
</i>
.skyblue{
color: skyblue;
}
.faa-vertical {
font-size: 1.5em;
color: #4c6cb3;
}
.faa-vertical.animated {
animation: vertical 4s ease infinite;
}
アイコンの右側にテキスト文字を表示するのはすんなりなのですが、アイコンの左側にテキスト文字を移動させるには少し工夫が必要です。方法は何通りかありますが、Font Awesome アイコンが、疑似要素の before を使用し after が空いていることに注目して、before の content のユニコードを after に移す方法を紹介しておきます。ユニコードは Font Awesome の公式で調べます。
<i class="far fa-hand-point-up faa-vertical animated"></i>
.faa-vertical {
font-size: 1.5em;
color: #ec6800;
}
.fa-hand-point-up::before{content: "";}
.fa-hand-point-up::after{content: "\f0a6";}
.faa-vertical.animated {
animation: vertical 4s ease infinite;
animation-delay: -2s;
}
3-5. faa-flash クラス
faa-flash クラスは、opacity プロパティ、つまり不透明度だけでピカピカやっています。opacity=0 で完全透明、opacity=1 で完全不透明です。テキスト文字を点滅させたいだけのときも使えます。transform プロパティが入っていないのでHTML要素を inline-block にする必要はありません。
<i class="fa-3x fas fa-splotch faa-flash animated"></i>
.faa-flash.animated,
.faa-flash.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-flash {
animation: flash 2s ease infinite;
}
@keyframes flash {
0%, 100%, 50% {opacity: 1;}
25%, 75% {opacity: 0;}
}
ハート型アイコンとハート割れ型アイコンを重ねて、ハート型アイコンを点滅させています。ハート型アイコンが opacity = 0 になるとハートが割れます。アイコンの重ね合わせはステップ４をご覧ください。
<i class="fa-3x fas fa-splotch faa-flash animated"></i>
.stack {
display: inline-block;
position: relative;
}
.fa-heart-broken::before,
.fa-heart::before{
color: tomato;
position: absolute;
top: 0;
left: 0;
}
.faa-flash.animated {
animation: flash 15s linear infinite;
}
キーフレームに transform プロパティを使わない場合には、インラインブロック化する必要がないのでテキスト文章中で強調したい部分などにアンダーラインを引くかのごとく、 opacity プロパティや color プロパティなどで、色の変化や点滅をさせて目立たせることができます。
<span class="fa-2x faa-flash animated">TOKYO JAPAN</span>
.faa-flash {
display: inline;
}
.faa-flash.animated {
animation: flash 20s ease infinite;
}
@keyframes flash {
0%{opacity: 1;}
10%{opacity: 0.4;}
20%{opacity: 1;}
30%{opacity: 0.4;}
40%{opacity: 1;}
50%{opacity: 0.4;}
60%{opacity: 1;}
70%{opacity: 0.4;}
80%{opacity: 1;}
90%{opacity: 0.4;}
100%{opacity: 1;}
0%{color: #ff6600;}
10%{color: #ff00cc;}
20%{color: #ff00cc;}
30%{color: #ab37c8;}
40%{color: #ab37c8;}
50%{color: #6600ff;}
60%{color: #6600ff;}
70%{color: #37c871;}
80%{color: #37c871;}
90%{color: #ff6600;}
100%{color: #ff6600;}
}
3-6. faa-bounce クラス
faa-bounce クラスは、transform プロパティの translate 関数を使って、上に移動して元に戻るの繰り返しです。faa-vertical クラスの場合は、上下対称に同じ距離だけ移動します。faa-bounce クラスは、transform の scale 関数と skew 関数を使って上に移動した場合と元に戻る場合の違いを際立たせるのがよさそうです。
<i class="fa-3x fas fa-handshake faa-bounce animated"></i>
/* faa-bounce クラスの原型 */
.faa-bounce.animated,
.faa-bounce.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-bounce {
animation: bounce 2s ease infinite;
}
@keyframes bounce {
0%, 10%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {transform: translateY(-15px);}
60% {transform: translateY(-15px);}
}
次の例は、transform プロパティの scale 関数を追加しています。上に移動するときに縦長にすることで伸びあがったように見せ、下に移動するときに縮ませて、ゴムのようなバウンド感を持たせてみました。
<i class="color1 fab fa-github-alt faa-bounce animated"></i>
<i class="color2 fas fa-hippo faa-bounce animated"></i>
<i class="color3 fas fa-frog faa-bounce animated"></i>
<i class="color4 fas fa-icons faa-bounce animated"></i>
.color1{color: #2ca9e1;}
.color2{color: #a3a3a2;}
.color3{color: #69b076;}
.color4{color: #e7609e;}
.faa-bounce {
font-size: 2em;
}
.faa-bounce.animated {
animation: bounce 2s ease infinite;
}
@keyframes bounce {
0%, 10%, 20%, 80%, 100% {
transform: scale(1.0, 1.0) translate(0,0);
}
40% {transform: scale(0.8, 1.5) translate(0,-0.8em);}
50% {transform: scale(1.5, 0.8) translate(0,0);}
60% {transform: scale(0.8, 1.5) translate(0,-0.8em);}
}
次の例は、transform プロパティの skew 関数を追加しています。上に移動するときにアイコンが平行四辺形が斜めになったような形になります。アイコンの形がゆがんでいることがわかると思います。
<i class="color1 fab fa-github-alt faa-bounce animated"></i>
<i class="color2 fas fa-hippo faa-bounce animated"></i>
<i class="color3 fas fa-frog faa-bounce animated"></i>
<i class="color4 fas fa-icons faa-bounce animated"></i>
.color1{color: #669933;}
.color2{color: #9999cc;}
.color3{color: #9966ff;}
.color4{color: #ff66cc;}
.faa-bounce {
font-size: 2em;
}
.faa-bounce.animated {
animation: bounce 2s ease infinite;
}
@keyframes bounce {
0%, 10%, 20%, 50%, 80%, 100% {
transform: translate(0,0) scale(1.0, 1.0);
}
40% {transform: translate(0,-.5em) skew(50deg,-20deg);}
50% {transform: translate(0,0) scale(1.5, 0.8);}
60% {transform: translate(0,-.5em) skewX(-50deg) skewY(20deg);}
}
3-7. faa-spin クラス
transform プロパティの rotate 関数を使った回転のアニメーションクラスには、Font Awesome 公式の fa-spin クラスがありますが、こちらの faa-spin クラスは、100%キーフレームの回転角度が359度になっています。
<i class="fa-3x fas fas fa-splotch faa-spin animated"></i>
/* faa-bounce クラスの原型 */
.faa-spin.animated,
.faa-spin.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-spin {
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {transform: rotate(0deg);}
100% {transform: rotate(359deg);}
}
入れ子にして使うと効果が倍増されます。次の例では、星型アイコンは animation-direction プロパティで行ったり来たり回転が指定されていますが、時計周りのときは回転が速くなり、反時計回りのときに回転が遅くなるのがわかると思います。
<div class="fa-2x">
<span class="faa-spin ani10">
<i class="faa-spin ani11 fas fa-star"></i> -
<i class="fas fa-snowflake"></i> -
<i class="faa-spin ani12 fas fa-star"></i>
</span>
<span class="faa-spin ani20">
<i class="faa-spin ani21 fas fa-star"></i> -
<i class="fas fa-snowflake"></i> -
<i class="faa-spin ani22 fas fa-star"></i>
</span>
</div>
.faa-spin {
display: inline-block;
color: #e5e4e6;
}
.faa-spin.ani10 {
animation: kfs37r-spin 4s linear infinite;
}
.faa-spin.ani11 {
color: #eb6ea5;
animation: kfs37r-spin 1s linear infinite;
animation-direction: alternate;
}
.faa-spin.ani12 {
color: #c85554;
animation: kfs37r-spin 1s linear infinite;
animation-direction: alternate-reverse;
}
.faa-spin.ani20 {
animation: kfs37r-spin 4s linear infinite;
}
.faa-spin.ani21 {
color: #2ca9e1;
animation: kfs37r-spin 1s linear infinite;
animation-direction: alternate-reverse;
}
.faa-spin.ani22 {
color: #007bbb;
animation: kfs37r-spin 1s linear infinite;
animation-direction: alternate;
}
ステップ７へつづく
コメント