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

leaf CSS
スポンサーリンク

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

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

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

葉っぱひらひら

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

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

HTMLの構造

<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を見る

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

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

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

コメント

タイトルとURLをコピーしました