CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのanimation-nameプロパティで@keyframesアニメーションに名前を設定する方法

CSSでアニメーションを実装する際、animation-nameプロパティを使用すると、@keyframesルールで定義したアニメーションに名前を指定し、要素に適用することができます。

animation-nameプロパティとは

animation-nameは、要素にどの@keyframesアニメーションを適用するかを決めるためのプロパティです。@keyframes側で定義した名前と一致させることで、そのアニメーションが実行されます。通常は、アニメーションの再生時間を指定するanimation-durationプロパティと組み合わせて使用します。

サンプルコード

以下のコードでは、赤い四角形のdiv要素に対して「myanim」という名前のアニメーションを設定しています。アニメーションが再生されると、要素が左から右へ100px移動しながら、背景色が緑から青へと変化します。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background: red;
            animation-name: myanim;
            animation-duration: 2s;
         }
         @keyframes myanim {
            from {left: 0px; background-color: green;}
            to {left: 100px; background-color: blue;}
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

コードの解説

  • animation-name: myanim; — 適用するアニメーションの名前を「myanim」に指定しています。
  • animation-duration: 2s; — アニメーションが完了するまでの時間を2秒に設定しています。
  • @keyframes myanim — アニメーションの開始時点（from）と終了時点（to）のスタイルを定義しています。

このように、animation-nameで@keyframesの名前を紐付けることで、位置や色などさまざまなスタイルを滑らかに変化させるアニメーションを簡単に作成できます。

  1. CSSで下境界線（border-bottom）のスタイルを設定する方法

    要素の下側に表示される境界線（ボーダー）のデザインを変更したい場合は、CSSの border-bottom-style プロパティを使用します。このプロパティでは、点線や二重線、破線、実線など、さまざまなスタイルの下境界線を簡単に設定できます。 指定できる主な値 border-bottom-style プロパティに指定できる代表的な値は以下のとおりです。 dotted … 点線 dashed … 破線 solid … 実線 double … 二重線 inset … 凹んで見える立体風の線 outset … 浮き上がって見える立体風の線 サンプルコード 次のコードを実行すると、各クラスごとに

  2. CSSのborder-colorプロパティで4つの境界線の色を個別に設定する方法

    CSSで4つの境界線の色を設定するには 要素の4つの境界線（上・右・下・左）それぞれに異なる色を指定したい場合は、border-colorプロパティを使用します。このプロパティには最大4つの値を半角スペースで区切って指定でき、色は上 → 右 → 下 → 左の順番（時計回り）で適用されます。 なお、border-colorを機能させるには、あらかじめborder-styleプロパティで境界線のスタイル（solid、dashed、dottedなど）を設定しておく必要があります。スタイルが未指定の場合、初期値が「none」となり、境界線自体が表示されない点に注意しましょう。 コード例 以下のコードで