アニメーションはCSSで作れる！
よくWebサイトを閲覧していて、要素がフェードインで浮き上がってきたり、左右から出て来りする物を目にするようになったような気がします。これらは以前からありましたが、最近ランディングページ（LP）が増加し、従来のままだとインパクトが足りない・特定の部分に特徴を持たせて惹きつけたい・読ませたい、という意図があるのでしょう。動きがあると注意が向くので、効果が期待できそうですね。
それではどうやって動かすの？という部分ですが、CSSを使って動きを付けていきます。
transitionを使う
これは以前紹介した方法です。繰り返しになるので、手短にしておきましょう。
CSSを使ってアニメーションさせる方法（https://www.attend.jp/html_170330）
マウスを乗せた時に背景色が変わる、線色が変わるといった動きを付ける場合、動きを付ける要素に:hoverを付けて要素にマウスが乗ったらというどう動くのかを指定していきます。
この時:hoverを付けた要素へtransitionを使って時間を指定する事で、間を補完するようにアニメーションを付けられます。
例えばこんな感じ・・・
a{
background-color:#ffffff;
transition: all 0.5s;
}
a:hover{
background-color:#ff0000;
}
これで、a要素にマウスが乗った時、背景白（#ffffff）から赤（#ff0000）へ変化するという動きが0.5秒のアニメーションとなります。background-color:#ffffff;
transition: all 0.5s;
}
a:hover{
background-color:#ff0000;
}
@keyframesを使う
今度は@keyframesを使ってみましょう。 これはより細かく、どの時点でどの要素を動かすのかといった設定をより細かく付けていく事ができます。サンプルとして、下方向から浮き出る動きを作りました。では早速ソースコードを見ていきましょう。
.fadein{
animation-duration:2s;
animation-name:fade;
}
@keyframes fade{
0%{
opacity:0;
transform:translateY(50px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
animation-duration:2s;
animation-name:fade;
}
@keyframes fade{
0%{
opacity:0;
transform:translateY(50px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
まず、animation-durationで何秒のアニメーションにするのかを決めます。
2秒ならanimation-duration:2s;とし、10秒ならanimation-duration:10s;となります。
次に決めた秒数のうち、何%の時間になったらこの動きをさせる。といった具合に細かく指定していきます。
このサンプルは2秒なので、0%の時点（0秒）では
opacity:0;で透明に
transform:translateY(50px);で下方向に50pxずらしています。
次に100%の時点（2秒）では
opacity:1;で表示
transform:translateY(0);で元の位置に移動させています。
もし1秒の時点での動きが欲しければ、50%{}としてあげればOK！
0.5秒の時点は25%、1.5秒の時点では75%ですね。
割りにくい秒数になるほど、計算が大変です。この何%の時・・・というのが非常に面倒なので、タイミングを合わせたい時には難しい部分になります。
これらは@keyframes 任意の名称{}の中に記述します。
そして任意の名称の部分、これをanimation-name:任意の名称;としてアニメーションの秒数を指定した部分に続けて記述します（サンプルでは.fadein｛｝の中）。
1つのアニメーションのセットをkeyframesで作っておき、使いたい部分に設定する事で、一度作ってしまえば複数箇所へ簡単に設置する事ができます。
1箇所にまとめてしまえば、動きを調整した時でも全てに対応させる事ができますね。
早速試してみると気が付きますが、この方法では1回の再生で止まってしまいます。
ゆらゆら動かし続けたい時や、数回繰り返したいという場面もあるのではないでしょうか。その際にはループさせる方法が有効です。
animation-iteration-count: ;を使って、ループさせる回数を指定できます。
無限に動かしたい場合はinfiniteとしてあげるとOK。簡単ですね。
記述する場所はサンプルでは.fadein｛｝の中です。
Javascriptを使って、コンテンツ表示時にclassを付与してアニメーション
アニメーションを付けても、ページの読み込みが完了した時点から動き出します。ページの先頭にあるコンテンツなら問題になりませんが、スクロールした先のコンテンツの場合は大問題です。
あらかじめアニメーションの秒数を多く取って、開始を遅らせて・・・としても、閲覧速度は人それぞれなので、何秒後にこの位置を見ている！と予見する事は不可能でしょう。これでは折角作っても、見た時点ではまだ動き出さなかったり、既にアニメーションが終わってしまった・・・なんて事も！
これでは効果がありませんね。
それではどうしたらいいのか？
javascriptを使って、画面内にコンテンツが入った時にclassやidを付けて動作させればいいんです。
例えば
.fadein{
opacity:0;
transform:translateY(50px);
}
.fadein.start{
animation-duration:2s;
animation-name:fade;
}
@keyframes fade{
0%{
opacity:0;
transform:translateY(50px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
こんな感じにして、startが付いた時にアニメーションを開始させることができますね。opacity:0;
transform:translateY(50px);
}
.fadein.start{
animation-duration:2s;
animation-name:fade;
}
@keyframes fade{
0%{
opacity:0;
transform:translateY(50px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
これなら閲覧速度に関係なく、狙ったタイミングでアニメーションを見てもらう事ができそうです。
あとは応用と発想で、あれこれ動かしちゃってみましょう！！
