CSSのanimation-nameでアニメーションの名前を指定し、要素に動きを適用する方法をわかりやすく解説

2024.09.14
スポンサーリンク

animation-nameプロパティは、適用するアニメーションを指定するために使用されます。@keyframesで定義されたアニメーションを関連付けることで、要素に動きを追加することができます。アニメーションの名前を指定しない場合や無効にしたい場合は、noneを使用します。

スポンサーリンク

animation-nameプロパティの値とその効果

  • none: アニメーションを適用しません。
  • keyframes 名: @keyframesで定義されたアニメーションを適用します。

注意点と関連情報

animation-nameプロパティを指定しないと、@keyframesで定義されたアニメーションは要素に適用されません。animation-nameを必ず定義し、アニメーションを指定する必要があります。また、noneを指定することで、アニメーションを一時的に無効化することが可能です。

animation-nameプロパティが効かない時の原因と対策

アニメーション名が正しく指定されていない

animation-nameプロパティに指定されたアニメーション名が、@keyframesで定義された名前と一致していない場合、アニメーションは実行されません。
対策: @keyframesで定義したアニメーション名とanimation-nameで指定した名前が正しく一致しているか確認しましょう。

@keyframes自体が定義されていない

animation-nameで指定したアニメーション名に対する@keyframesがCSS内に存在しない場合、アニメーションは実行されません。
対策: 必ず、アニメーション名に対応する@keyframesが正しく定義されていることを確認してください。

アニメーションの他のプロパティが不足している

animation-nameが正しく設定されていても、animation-durationやanimation-timing-functionなど、他のアニメーションプロパティが不足しているとアニメーションは実行されません。
対策: animation-durationやanimation-timing-functionなど、必要なアニメーションプロパティがすべて正しく設定されているか確認しましょう。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        text-align: center;
    }
    .css-sample-box {
        margin: 20px 0;
        width: 150px;
        height: 150px;
        background-color: #4CAF50;
        display: inline-block;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
    }

animation-name: css-sample-move-right

animation-name: css-sample-move-rightは、要素が右に移動するアニメーションを適用します。定義された@keyframesを使って、要素が右へスムーズに移動します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-move-right"></div>
    </div>

CSSコード

.css-sample-animation-move-right {
    animation-name: css-sample-move-right;
}

@keyframes css-sample-move-right {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(200px);
    }
}

表示結果

animation-name: css-sample-change-color

animation-name: css-sample-change-colorは、要素の色が変わるアニメーションを適用します。アニメーションの開始から終了までに、要素の背景色がスムーズに変化します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-change-color"></div>
    </div>

CSSコード

.css-sample-animation-change-color {
    animation-name: css-sample-change-color;
}

@keyframes css-sample-change-color {
    0% {
        background-color: #4CAF50;
    }
    100% {
        background-color: #FF5722;
    }
}

表示結果

animation-name: none

animation-name: noneは、アニメーションを適用しない設定です。アニメーションは適用されず、要素は動きません。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-box css-sample-animation-none"></div>
    </div>

CSSコード

.css-sample-animation-none {
    animation-name: none;
}

表示結果

まとめ

animation-nameプロパティは、アニメーションを適用するために非常に重要なプロパティです。@keyframesで定義されたアニメーション名を指定することで、動きのあるデザインを簡単に作成することができます。また、noneを使用して、アニメーションを一時的に無効にすることもできます。アニメーションを使ったデザインを施す際に、animation-nameプロパティをうまく活用しましょう。

スポンサーリンク