ログイン
問題6

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

アイコン画像

問題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¥
            

コメントのアイコン解説

解答が絶対ではないのですが、大枠の考え方を理解してください。
まず跳ねる前にしゃがむような動作をいれます。その時に少し下に動かしながら、y軸方向へ縮小、x軸方向へ拡大させます。そして一気にもとの位置、形にもどします。
少し物理の話になるのですが、加速する物体には質量*加速度分だけの力が加速方向の反対方向にかかります。なのでやわらかいものが縦方向に加速しているとき、縦に伸びます。ジャンプ後のscaleを変更することで見かけのやわらかさを調節することができます。
ジャンプ時と着地時もしゃがんでいる時の要領で設定すれば完成です。
ログインして解答を見る
CSSAnimationを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる