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

CSSでmargin-bottomプロパティをアニメーションさせる方法

CSSでは、margin-bottomプロパティも@keyframesルールとanimationプロパティを組み合わせることで、滑らかにアニメーションさせることができます。要素の下側の余白が時間の経過とともに変化するため、レイアウトに動きを持たせたい場合に活用できます。

実装例

以下のコードでは、段落要素（pタグ）に対して3秒間のアニメーションを無限に繰り返すよう設定しています。アニメーションの進行が70%に達した時点で、margin-bottomの値が20pxから60pxへと変化します。

<!DOCTYPE html>
<html>
   <head>
     <style>
       p {
         animation: mymove 3s infinite;
         margin-bottom: 20px;
       }
       @keyframes mymove {
         70% {
           margin-bottom: 60px;
         }
       }
     </style>
   </head>
   <body>
     <p>これはサンプルテキストです。これはサンプルテキストです。
       これはサンプルテキストです。これはサンプルテキストです。
       これはサンプルテキストです。これはサンプルテキストです。
       これはサンプルテキストです。これはサンプルテキストです。
     </p>
     <p>これは2つ目のサンプルテキストです！</p>
  </body>
</html>

コードのポイント

  • animation: mymove 3s infinite; … 「mymove」という名前のキーフレームを3秒かけて再生し、無限に繰り返す指定です。
  • @keyframes mymove … アニメーションの各段階でのスタイルを定義します。ここでは70%の時点でmargin-bottomを60pxに変更しています。
  • margin-bottom: 20px; … アニメーション開始前の初期値として設定しておくことで、スムーズな補間が行われます。

このコードをブラウザで実行すると、下の余白が周期的に広がったり縮んだりする動きを確認できます。ボタンやカードなど、実際のUI要素にも応用できる基本的なテクニックなので、ぜひ試してみてください。

  1. CSSのtext-justifyプロパティとは？使い方と各値の解説

    text-justifyプロパティとは CSSのtext-justifyプロパティは、text-alignプロパティにjustify(両端揃え)が指定されている場合に、テキストをどのような方法で均等割り付けするかを制御するためのプロパティです。単語間のスペースで調整するか、文字間のスペースで調整するかなどを細かく指定できます。 構文 text-justify: auto | inter-word | inter-character | none | initial | inherit; プロパティの値一覧 auto — ブラウザが最適な揃え方を自動的に判断します(既定値)。 inter-

  2. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini