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

Question

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

Answer 1

解答ソースコード

              @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¥

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

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

あらかじめエディタに書くコード

期待する画面

解答ソースコード

解説