フェードインしながら「ポヨヨン」効果のあるCSSアニメーション

programming
学習コースキャンペーンバナー

こんにちは、フローです。

今回は、「ポヨヨン」アニメーションの記述例を書いていきたいと思います。

前回の記事はこちらです。

「ポヨヨン」アニメーションの作成

ウェブデザインには、

視覚的な要素を強調するためのさまざまな方法がありますが、その一つがアニメーションです。

アニメーションは、ユーザーの注目を引き、インタラクティブな体験を提供します。

今日は、フェードインしながら

「ポヨヨン」

と動くCSSアニメーションの作り方について説明します。

このアニメーションは、Webページをリフレッシュせずに無限にループします。

HTML

<div class="element">
  <h1>こんにちは、世界！</h1>
</div>

ここでは、

divタグで囲んだh1要素を作成しました。

divにはelementというクラスを付けています。

このクラスは、後でCSSアニメーションを適用するためのものです。

CSS

@keyframes fadeInBounce {
    0% {opacity: 0; transform: translateY(-100px);}
    25% {opacity: 0.5; transform: translateY(30px);}
    50% {opacity: 1; transform: translateY(-20px);}
    75% {opacity: 1; transform: translateY(0);}
    100% {opacity: 0;}
}

.element h1 {
    animation: fadeInBounce 4s ease-out infinite;
}

このCSSは、

フェードインしながら「ポヨヨン」と動く効果を実現します。

transform: translateY()を使用して

要素を上下に移動させることで作られています。

フェードインとフェードアウト効果は、

opacityプロパティを使って作られています。

@keyframes fadeInBounceは、

アニメーションの各段階を定義しています。

0%から100%までの間で、要素の透明度と位置がどのように変化するかを定義します。

そして、このアニメーションを.element h1に適用します。

animation: fadeInBounce 4s ease-out infinite;

という記述は、

アニメーションの

名前(fadeInBounce)、

期間(4s)、

タイミング関数(ease-out)、

そしてアニメーションが無限にループすること(infinite)を指定しています。

これで、フェードインしながら


「ポヨヨン」と跳ねるアニメーションが完成します。

このアニメーションはCSSだけで作成されていますので、

JavaScriptの知識がなくても試すことができます。

また、無限ループするので、

一度設定すればページがリフレッシュされるまでアニメーションは続きます。

しかし、

あまりにも多くのアニメーションをページに追加すると、

パフォーマンスに影響を及ぼす可能性がありますので、その点には注意が必要です。

また、アニメーションを使用する際は、ユーザー体験を向上させる手段として使うべきであり、

ユーザーが必要な情報を見つけることを妨げるものであってはなりません。

まとめ

以上が、フェードインしながら「ポヨヨン」と跳ねるCSSアニメーションの作り方です。

このアニメーションをウェブサイトに取り入れることで、

よりインタラクティブで楽しい体験をユーザーに提供することができます。

一度試してみてはいかがでしょうか？

レッツチャレンジ！