【CSS】リズミカルなアニメーション【実験段階】
どうも！LSSです！！
CSSのkeyframesアニメーションで、リズミカルな動きを作ったら面白いかな？と試みてみました。
たんたたたんたん、たんたん♪
たんたたたんたん、たんたん♪
コード
<style>
@keyframes rzma{
0%,12.5%,18.75%,25%,37.5%,50%,62.5%,75%,87.5%,100%{transform:translatey(0px);}
3.125%,15.625%,21.875%,28.125%,40.625%,65.625%,78.125%{transform:translatey(-20px);}
}
.rzm{
height:50px;
text-align:center;
animation:rzma 4s linear infinite;
}
</style>
<div class="rzm">たんたたたんたん、たんたん♪</div>
要となるのは%指定部分
リズムの要となるのは%の指定部分で、上記コード上の赤太字部分です。
実際に与える効果を指定しているのは青太字部分のtransformプロパティです。
変化させたいプロパティの値を２種類、用意できれば、青太字部分を書き換えると、「たんたたたんたん、たんたん♪」のリズムで変化します^^
0～100%を2の累乗数で分断するぞう君
を利用しました。
が、その後の加工工程が多かったので…もっと作り込んだ方がいいかな？と改めて思ったり。
まず「32」分割を指定すると、
0%,3.125%,6.25%,9.375%,12.5%,15.625%,18.75%,21.875%,
25%,28.125%,31.25%,34.375%,37.5%,40.625%,43.75%,46.875%,
50%,53.125%,56.25%,59.375%,62.5%,65.625%,68.75%,71.875%,
75%,78.125%,81.25%,84.375%,87.5%,90.625%,93.75%,96.875%,
100%
↑こうなりました。
８個で改行するようにしていますが…これをさらに「４個づつ」に分断すると、
0%,3.125%,6.25%,9.375%,
12.5%,15.625%,18.75%,21.875%,
25%,28.125%,31.25%,34.375%,
37.5%,40.625%,43.75%,46.875%,
50%,53.125%,56.25%,59.375%,
62.5%,65.625%,68.75%,71.875%,
75%,78.125%,81.25%,84.375%,
87.5%,90.625%,93.75%,96.875%,
100%
↑こうなります。
リズム
「たんたたたんたん、たんたん♪」のリズム、厳密に言うと、
たんたたたんたん（うん）たんたん（うん）
となります。
（「たん」は四分音符、「た」は八分音符、「（うん）」は四分休符）
四分音符の長さを「4」とし、八分音符の長さを「2」とすることにして…。
音符ごとの表現を「開始直後の1タイミングで上がり、終了時に向けて下がっていく」ものと考えると、
↑このような変化をする事になります。（無料のExcelOnlineに手描き線ｗ）
このうち、「A列とB列の間の罫線が『0%』に該当、B列とC列の間の罫線が次の『3.125%』に該当、以下同様…」と考え、４つ毎に引いた罫線部分とそうでない部分が分かるように、さっきの%の羅列を変形すると…
0%,
3.125%,
6.25%,
9.375%,
12.5%,
15.625%,
18.75%,
21.875%,
25%,
28.125%,
31.25%,
34.375%,
37.5%,
40.625%,
43.75%,
46.875%,
50%,
53.125%,
56.25%,
59.375%,
62.5%,
65.625%,
68.75%,
71.875%,
75%,
78.125%,
81.25%,
84.375%,
87.5%,
90.625%,
93.75%,
96.875%,
100%
こういう形になります。
※赤太字は「上がっている状態を指定」、青太字は「下がっている状態を指定」する必要がある個所となります。
残った黒字部分は今回書く必要がないので削除すると、
0%,
3.125%,
12.5%,
15.625%,
18.75%,
21.875%,
25%,
28.125%,
37.5%,
40.625%,
50%,
62.5%,
65.625%,
75%,
78.125%,
87.5%,
100%
となります。
次に、青文字部分と赤文字部分、それぞれ集めると、
0%,12.5%,18.75%,25%,37.5%,50%,62.5%,75%,87.5%,100%
3.125%,15.625%,21.875%,28.125%,40.625%,65.625%,78.125%
↑こう並ぶ事になります。
あとはそれぞれに { } で各状態を指定するプロパティ・値を付け足して、
0%,12.5%,18.75%,25%,37.5%,50%,62.5%,75%,87.5%,100%{transform:translatey(0px);}
3.125%,15.625%,21.875%,28.125%,40.625%,65.625%,78.125%{transform:translatey(-20px);}
というkeyframesが出来上がります^^
余談：
transform:translatey(数値px);
は、数値分だけ、↓にずらして表示するCSSコードです。
今回はマイナスの数値を指定しているので、上に跳ね上がる動きになりました。
あとがき
今回は２つの値でやってみましたが…使いようによっては、素敵な動きも実現できるのでは？って気はしています。
ただ、その「使いよう」が、今回の加工工程も「一例」に過ぎず、作るものによってはまったく違う手の掛け方になると思われるので、分断するぞう君を使いやすくするのも、どういう方向で？ってとこで迷っちゃったりしますね^^;
ちなみに、唐突に「リズミカルなアニメーション」を意識しだしたきっかけは、
の記事の一部を、自分なりに解釈（曲解かも？ｗ）したところからでしたｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
