ログイン

問題6 跳ねるアニメーションを作ろう!

CSSAnimationの問題

CSSAnimation

跳ねるアニメーションを作ろう!

問題

今回は解答と同じものを作ろうとするのではなく、自分で考えてどうやったらこんな動きになるのか想像しながらやっていただきたいです。

自分の環境に書くコード

              <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¥
            
答えのアイコン

解説

解答が絶対ではないのですが、大枠の考え方を理解してください。
まず跳ねる前にしゃがむような動作をいれます。その時に少し下に動かしながら、y軸方向へ縮小、x軸方向へ拡大させます。そして一気にもとの位置、形にもどします。
少し物理の話になるのですが、加速する物体には質量*加速度分だけの力が加速方向の反対方向にかかります。なのでやわらかいものが縦方向に加速しているとき、縦に伸びます。ジャンプ後のscaleを変更することで見かけのやわらかさを調節することができます。
ジャンプ時と着地時もしゃがんでいる時の要領で設定すれば完成です。
完了にする!
LINEの友達追加でお役立ち動画をGET!!