CSSAnimation
Googleでログイン問題6：跳ねるアニメーションを作ろう
今回は解答と同じものを作ろうとするのではなく、自分で考えてどうやったらこんな動きになるのか想像しながらやっていただきたいです。
あらかじめエディタに書くコード
<p>あ</p>
¥HTML¥
p{
font-size: 3em;
width: 1em;
animation:bound 3s infinite;
}
@keyframes bound{
0%{}
10%{}
40%{}
50%{}
60%{}
75%{}
85%{}
100%{}
}
¥CSS¥
期待する画面
解答ソースコード
@keyframes bound{
0% { transform: scale(1.0, 1.0) translate(0%, 0%); }
10% { transform: scale(1.1, 0.9) translate(0%, 5%); }
40% { transform: scale(1.2, 0.8) translate(0%, 10%); }
50% { transform: scale(1.0, 1.0) translate(0%, 0%);}
60% { transform: scale(0.9, 1.2) translate(0%, -50%); }
75% { transform: scale(0.9, 1.2) translate(0%, -20%); }
85% { transform: scale(1.2, 0.8) translate(0%, 15%); }
100% { transform: scale(1.0, 1.0) translate(0%, 0%); }
}
¥CSS¥
#忍者CODE無料問題集で活動を記録しよう
完了にする！
まず跳ねる前にしゃがむような動作をいれます。その時に少し下に動かしながら、y軸方向へ縮小、x軸方向へ拡大させます。そして一気にもとの位置、形にもどします。
少し物理の話になるのですが、加速する物体には質量*加速度分だけの力が加速方向の反対方向にかかります。なのでやわらかいものが縦方向に加速しているとき、縦に伸びます。ジャンプ後のscaleを変更することで見かけのやわらかさを調節することができます。
ジャンプ時と着地時もしゃがんでいる時の要領で設定すれば完成です。