[CSS] 葉っぱがひらひら落ちるアニメーション

こんにちは、素人エンジニアです。

cssだけで、葉っぱがひらひら落ちていくアニメーションを作りました。

コピペで使ってください！

葉っぱひらひら

↓HTMLとCSSをクリックするとコードが表示されます。

See the Pen 葉っぱひらひら by amateur-engineer (@amaeng) on CodePen.

<ul class="leaf">
  <li></li>
  <li></li>
　・・・
</ul>

liタグにcssを適用させることで、葉っぱの形を表現しています。

liタグをいっぱい増やせば、葉っぱもいっぱいになります。cssではli:nth-childで要素を指定しているため、それぞれの動きを変えることも可能です。

葉っぱの形は、border-radiusで簡単に作ることができます！

width: 130px;
height: 100px;
background: #009926;
border-radius: 0% 70%;

四角形の対角の2つの角だけを丸めてあげれば、葉っぱのような形になります。

あとは、これに二つのアニメーションを加えるだけでOKです！

@keyframes fall {
  to {
    top: 120%;
  }
}

表示範囲外まで要素を落とします。

@keyframes sway {
  from {
    transform: translateX(0px) rotate(0deg);
  }
  to {
    transform: translateX(200px) rotate(-45deg);
  }
}

x軸方向に動かします。その時に、葉っぱを少し回転させるとそれっぽくなります。

これだけだと一方向だけの動きになりますが、
animation-airection(アニメーションの方向)にalternate(反転)を指定すればひらひらを表現できます。

アニメーションを二つ適用するには、間にカンマ（,）を加えるだけ！

animation: fall 4s linear infinite, sway 2s ease-in-out infinite alternate;

これで、葉っぱの落ちるアニメーション完成です。

葉っぱの大きさを変えたり、アニメーションの開始時間を遅らせことで同じ動きでも変化を出すことが可能です。demoのコードは、CodePenからコピペできます！

葉っぱの色を変えると、桜のようなアニメーションになります。

他にもcssだけで作ったものを紹介しています。

↓↓ HTMLとCSSの学習はこの1冊があれば安心！! ↓↓

リンク