【CSS】再び！キーフレームアニメーションについて
どうも！LSSです！！
CSSに実装されている「キーフレームアニメーション」機能、このブログでもたびたびサンプルなどで使用しています。
だいぶ前（一年ぐらい前）に、
こんな記事も書いていましたが、今回は
「実際にキーフレームアニメーションを使ったものを作るのに、どんな手順で書いているか」
を書いてみます！
はじめに、土台となるものから作ります
テスト中…
コード
<style><!--
.test{
width:100px;
background-color:lightgreen;
}
--></style>
<div class="test">テスト中…</div>
まず、「test」というクラスを持つ<div>タグを用意して、中に適当に文字（テスト中…）を入れておきます。
そして、そのクラスに対して別途<style>タグにて、
「幅 100ピクセル、背景色 lightgreen」
と指定しておきます。
次に、動き（変化）を指定するkeyframesを作ります
テスト中…
コード
<style><!--
@keyframes nobi{
0%{width:200px;}
100%{width:300px;}
}
.test{
width:100px;
background-color:lightgreen;
}
--></style>
<div class="test">テスト中…</div>
赤字部分が、「こんな風に変化してね」というキーフレームです。
キーフレーム名は「nobi」としておきました。
0%（アニメーションにかける時間のうち、経過時間が0%の時＝開始時）に、
width:100px;（幅 100ピクセルを指定した状態）にする
100%（アニメーションにかける時間のうち、経過時間が100%の時＝指定時間全てが経過した時）に、
width:300px;（幅 300ピクセルを指定した状態）にする
…というキーフレームにしてみました。
まだ、キーフレームを用意しただけで、「test」クラスに反映させていないので、見た目は変わっていません。
testクラスにキーフレームを呼び出すアニメを指定
テスト中…
コード
<style><!--
@keyframes nobi{
0%{width:100px;}
100%{width:300px;}
}
.test{
background-color:lightgreen;
animation:nobi 3s linear 0s infinite;
}
--></style>
<div class="test">テスト中…</div>
<style>タグ内、「.test」へのCSS指定の中に、
animation:nobi 3s linear 0s infinite;
という一行を書きました。
と同時に、
width:100px;
という指定はキーフレームに任せる事になるので、「.test」のほうでは削除しています。
これでもう、動いていますね^^
animation:を適用します。
nobiというキーフレームで
3s（秒）かけて再生します。
linearという変化度合いで、
0s（秒）後から開始します。
infinite;（無限）回数繰り返します。
という意味の指定です。
キーフレームには 0% の時と 100% の時のケースしか指定していませんが、キーフレームアニメーションは勝手にその間を補完してくれます。
「幅を100にして、101にして、102にして（中略）299にして、300でおしまい！」
と全部書かずに済むんですね^^ 超便利！ｗ
最後まで再生したら逆再生で戻る
テスト中…
コード
<style><!--
@keyframes nobi{
0%{width:100px;}
100%{width:300px;}
}
.test{
background-color:lightgreen;
animation:nobi 3s linear 0s infinite alternate;
}
--></style>
<div class="test">テスト中…</div>
animationの指定の最後、infiniteの後ろに
alternate
を付け足すだけで、「アニメ再生後、逆再生で元に戻る」ようになります！
これも使い勝手がいいですね^^
静と動
テスト中…
コード
<style><!--
@keyframes nobi{
0%{width:100px;}
50%{width:300px;}
100%{width:300px;}
}
.test{
background-color:lightgreen;
animation:nobi 3s linear 0s infinite alternate;
}
--></style>
<div class="test">テスト中…</div>
今度はまた、キーフレーム内の方に手を加えてみました！
50%{width:300px;}
を 0% と 100% の間に挿入しています。
これにより、
「0%の時は幅100ピクセル、50%の時は幅300ピクセル、100%の時は幅300ピクセル」
となるように補完されます。
という事は
「開始時から指定時間の半分が経過するまでは、100から300に徐々に増えていく。そこから指定時間終了までは、300から300に徐々に変化する（変化していない）」
という指定になるんですね。
この「50%」という数値は細かく指定でき、またいくつでも「途中経過」を書き足せるので、様々な動きを表現する事ができます^^
あとがき
実は、このキーフレームアニメーションにCSS変数を絡ませて、より変わった動きが作れないかな、と試みていましたｗ
一応、できそうではあるのですが、多少クセがあり（キーフレーム内でCSS変数の内容を変化させようとすると「補完」が働かない）つつ…。
それを解説つきで記事にするとしたら、この基本的な部分も込みになると膨大な記事になってしまいそうだったので、こちらをまず先に挙げておきます^^
あと、これまでkeyframesについて このブログで扱ってきたものはこちら！
keyframes の検索結果 - Little Strange Software
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
