問題
6
CSSアニメーション
跳ねるアニメーションを作ろう
CSSアニメーションの問題に挑戦しよう！
問題
「跳ねるアニメーションを作ろう」
今回は解答と同じものを作ろうとするのではなく、自分で考えてどうやったらこんな動きになるのか想像しながらやっていただきたいです。
あらかじめエディタに書くコード
<p>あ</p>
¥HTML¥
p{
font-size: 3em;
width: 1em;
animation:bound 3s infinite;
}
@keyframes bound{
0%{}
10%{}
40%{}
50%{}
60%{}
75%{}
85%{}
100%{}
}
¥CSS¥
期待する画面
解答と解説（跳ねるアニメーションを作ろう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
解答が絶対ではないのですが、大枠の考え方を理解してください。
まず跳ねる前にしゃがむような動作をいれます。その時に少し下に動かしながら、y軸方向へ縮小、x軸方向へ拡大させます。そして一気にもとの位置、形にもどします。
少し物理の話になるのですが、加速する物体には質量*加速度分だけの力が加速方向の反対方向にかかります。なのでやわらかいものが縦方向に加速しているとき、縦に伸びます。ジャンプ後のscaleを変更することで見かけのやわらかさを調節することができます。
ジャンプ時と着地時もしゃがんでいる時の要領で設定すれば完成です。
