CSS、要素を弾ませる
バウンドアニメーション。

CSSアニメーションの組み立て方。

こんにちは、「ふ」です。
今回は要素が弾む、バウンドアニメーションの作り方について紹介していきます。

バウンドアニメーションはwebサイトよりも、youtubeの動画でよく見かけるかとおもいます。
単にキャラクターなどの要素が上下するだけでなく、着地したときの衝撃で一瞬変形する。これをwebでも再現したいと思います。

また当記事ではコードを紹介するだけにとどまりません。

・イメージからキーフレームを設計
・コードを仮組みし、動きを確認
・プレビューしながらの微調整

といった、webアニメーションの発案から完成まで、その具体的な進めかたについても学習することができるよう配慮しました。
チュートリアルを進めて、ほかのCSSアニメーション制作にも役立てるようにしてください。

キーフレームを考える。

イメージはこうです。

「飛び上がる」→「着地する」→「衝撃で変形」→「変形がもとに戻る」→「飛び上がる」

〜この繰り返しです。
とすると必要なキーフレームは....

　@1@ 飛び上がって最高点に達している状態
　@2@ 着地した状態
　@3@ 縦に縮み、横に伸びた状態
　@4@ 元の形に戻った状態
　@5@ 再び飛び上がって最高点に達している状態


〜この５つの状態を分岐点として、このアニメーションの１サイクルが構成されます。
最初の@1@と最後の@5@を同じ状態にしておくことで、アニメーションを繰り返したときにシームレスに表示されるようになります。

ところで。

賢明な読者ならお気づきのことかと思いますが、@1@と@5@、@2@と@4@は全く同じ状態です。

であれば、１回目はキーフレーム@1@→@2@→@3@と順方向に再生し、２回目は@3@→@2@→@1@と逆方向に再生。３回目以降も順/逆再生を繰り返す。
そうすると、キーフレームを５つ設定するところが、３つに省略することができます。

animation-direction:alternate;

animation-directionプロパティを「alternate」とすれば、再生方向の順/逆を繰り返す実装が可能です。

現行の主要ブラウザであればキーフレームの２つや３つ、読み込みスピードに影響が出ることはありません。
しかしながらコードをメンテナンスする際、それを行うのは人の手によるものです。
なるべくコードを単純化し、メンテナンス効率を高めることをおすすめします。

ちなみに「ふ」は賢明ではないので、記事を作りはじめて２日後に、このことに気づきました。

動かしてみる。

分岐点が決まったところで、CSSのラフに落とし込んでいきます。

▪️sample.svg 画像「sample.svg」⬆︎を使ってやってみます。

@1@〜@3@のキーフレームを打つ場所ですが、

　　    0%：@1@ 浮いた状態
　　  80%：@2@ 着地
　　100%：@3@ 衝撃により変形

　 ということにしました。

画像を表示して、設計したキーフレームをCSSで記述していきます。

<img id = "sample" src = "sample.svg">

#sample ｛ bbanimation:「「５sample」」 1s 「「１alternate」」 infinite; bb｝ ....「「５@1@」」「「１@2@」」 @keyframes sample ｛ bb0% { bbtransform:translateY(-20%) scale(1,1); bb} bb80% { bbtransform:translateY(0%) scale(1,1); bb} bb100% { bbtransform:translateY(0%) scale(1.1,0.9); bb} bb｝....「「１@3@」」

@1@ animation-nameはid名と同じ「sample」としています。
ページ内にアニメーション要素が複数あった場合、id名やclass名と同一のnameを採用したほうがメンテナンスの際にわかりやすくなります。

@2@ 先述のとおり、animation-timing-functionを「alternate」にしています。これで順/逆再生が交互に行われます。

@3@ キーフレームです。
このアニメーションに必要となってくるプロパティは、

　上下：transform translateY
　伸び縮み：transform scale(x,y)

ですね。

浮かび具合は-20%。
変形の際はx方向に1.1倍、y方向に0.9倍としました。

結果⬆︎です。
やろうとしていることは解るが、お世辞にも「バウンドしている」とは言い難い感じですね。

大丈夫です。ここから調整をしていきます。

細かな仕上げ。

現在ぎこちない動きですが、キーフレーム通りに動いているのは確かです。
ここからプロパティを追加して、イメージに近づけていきましょう。

transform-origin。

transform-originは変形の基準を指定するプロパティです。
初期値は「center」で、要素の中心が基準になっています。今回は「着地した衝撃で変形させる」のですから、要素は地面に対して変形すべきです。

垂直方向の基準点を床である「bottom」に指定しましょう。

#sample { 「「１transform-origin:center bottom」」; animation:sample 1s alternate infinite; }

イメージにちょっと近づいた感があります。
でも、どこか機械的。

timing-functionの調整。

animation-timing-functionは、アニメーションの進捗具合を指定するプロパティ。
初期値は「ease」で、「なめらかに始まり、ゆっくり終わる」という進捗カーブを描きます。

初期値のままだと、要素は「地面に近づくにつれ落下速度が遅くなる」ことになります。
物理的にこれはおかしい。アニメーションが不自然になってしまっているのは、初期値「ease」の仕業です。

バウンドする物体は、最高点に近づくにつれ運動速度が遅くなるのが自然です。
animation-timing-functionの値を、「ease-in（ゆっくり始まり、通常の速度で終了する）」に変更しましょう。

#sample { transform-origin:center bottom; animation:sample 1s 「「１ease-in」」 alternate infinite; }

自然になりましたね。
これで完成としましょう。お疲れ様でした！

timing-functionはほかにもいろいろありますので、切り替えて最適なものを選択するようにしてください。

• CSSアニメーション05、animation-timing-function。
  

  2021.04.14
  初期値は一定にあらず。

アニメーションの作成手順。

最後までお読みくださり、ありがとうございました。
今回は要素を弾ませるアニメーションを取り上げるとともに、webアニメーションのイメージ→仮組み→仕上げまでの手順も紹介させていただきました。その流れをまとめると⬇︎のようになります。

webアニメーションの作成手順。

@1@ イメージからなるべくシンプルなキーフレームを考える。

@2@ コードを書いてプレビュー。この段階では、動きが反映されていたらOK。

@3@ イメージ通りになるよう、キーフレームの位置やプロパティを変更し微調整。

もし皆さん独自の、まったく新しいアニメーションを作ろうとしたとき。
ここに挙げた@1@〜@3@の手順を参考にしてみてください。着実に完成へと向かうはずです。

当記事が皆さんの、アイデアを形にする手助けとなれば幸いです。
ではまた〜 ♫