・これらの要素を組み合わせて目的のアニメーションを表現することが可能。
・アニメーションサンプルはこちら
https://dwd.kiminoquest.com//animation_sample.php
アニメーションのCSS設定
animation一括指定プロパティについて
・スペース区切りで以下の内容を指定する。順序は次の通りである。
animation:
（要素に適用される1つまたは複数のアニメーション）
（1回のアニメーション周期が完了するまでの所要時間）
（周期の中でどのように進行するか）
（どこから開始するか）
（停止するまでに再生される回数）
（再生の向きを順方向、逆方向、前後反転のいずれにするか）
（実行の前後にどう対象にスタイルを適用するか）
（実行中か停止中かを設定する）
・初期値は次の通り。
animation-name: none /* 要素に適用される1つまたは複数のアニメーション */
animation-duration: 0s /* 1回のアニメーション周期が完了するまでの所要時間 */
animation-timing-function: ease /* 周期の中でどのように進行するか */
animation-delay: 0s /* どこから開始するか */
animation-iteration-count: 1 /* 停止するまでに再生される回数 */
animation-direction: normal /* 再生の向きを順方向、逆方向、前後反転のいずれにするか */
animation-fill-mode: none /* 実行の前後にどう対象にスタイルを適用するか */
animation-play-state: running /* 実行中か停止中かを設定する */
animationプロパティは個別設定が可能
・例えば、1回あたりのアニメーション時間は「animation-duration」プロパティで指定が可能。
アニメーションの表現方法
・animation-timing-functionプロパティで、アニメーションの表現を指定することが可能。（色々あるが、基本的にeaseやlinearを使えばOK）
cubic-bezier(x1,y1,x2,y2)
数値で細かく指定します。思い通りの動きを実現。
ease
既定値であり、アニメーションの中央に向けて変化量が増加し、最後に向けて減少します。
linear
等しい速度でアニメーションします。
ease-in
プロパティのアニメーションの変化の速度はゆっくり始まり、終了まで加速します。
ease-out
アニメーションは速く始まり、速度を落としながら続きます。
ease-in-out
プロパティのアニメーションはゆっくり変化し、速度を上げ、また速度を落とします。
steps(n, <jumpterm>)
＊
jump-start
アニメーションの開始時に最初のジャンプが発生するように、左連続関数を表します。
jump-end
アニメーションの終了時に最後のジャンプが発生するように、右連続関数を表します。
jump-none
どちらにもジャンプはありません。代わりに、 0% 位置と 100% 位置の両方で、それぞれ 1/n の間隔を保持します。
jump-both
0% 位置と 100% 位置の両方で一時停止を含み、アニメーションの反復中に効果的にステップを追加します。
start
jump-start と同じです。
end
jump-end と同じです。
step-start
steps(1, jump-start) と同じです。
step-end
steps(1, jump-end) と同じです。
・cubic-bezierについて
https://hatoblog.net/web-service-easings/
https://developer.mozilla.org/ja/docs/Web/CSS/easing-function
https://qiita.com/96usa_koi/items/6f313f1d664806a77313
https://oti.github.io/lp58/#demo-2
複数のアニメーションを連続して実行する方法
・複数のアニメーションをカンマ区切りで指定すれば実現できる。
html.wf-active #back_object .buble {
animation: buble_In 1s ease 1 0.6s forwards,
buble_fuwafuwa 2.4s infinite 2s ease-in-out alternate;
}
@keyframes buble_In {
0% {
transform: translateY(100%) scale(0.8);
opacity: 0;
}
100% {
transform: translateY(0) scale(1.0);
opacity: 0.2;
}
}
@keyframes buble_fuwafuwa {
0% {
transform: translate(0, 0) rotate(-7deg);
opacity: 0.2;
}
50% {
transform: translate(0, -7px) rotate(0deg);
opacity: 0.1;
}
100% {
transform: translate(0, 0) rotate(7deg);
opacity: 0.2;
}
}
https://qiita.com/mc-chinju/items/f0cd1ac66d406c46bc27
詳細
・animationについて（公式）
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations
・transformプロパティについて（公式）
https://developer.mozilla.org/ja/docs/Web/CSS/transform
・transitionについて（公式）
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
参考
・CSS
https://b-risk.jp/wp/wp-content/themes/brisk/sample/entry/20210107/
https://b-risk.jp/blog/2021/01/anim-reference/
・CSS/SVG/Canvasの使い分け
https://ics.media/entry/200520/
イケてるサンプル
・SVGも含む
https://photoshopvip.net/117916