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

CSSでbottom（下）プロパティをアニメーション化する方法

CSSの bottom プロパティは、position が absolute や relative、fixed の要素に対して、基準となる位置から下端までの距離を指定するプロパティです。この値を @keyframes ルールと組み合わせることで、要素を上下にスムーズに動かすアニメーションを実装できます。

bottomプロパティのアニメーション例

以下のコードでは、黄色い背景・赤い枠線を持つdiv要素が、3秒間のサイクルで上下方向に動き続けます。アニメーションは無限に繰り返されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 300px;
            background: yellow;
            border: 10px solid red;
            animation: myanim 3s infinite;
            bottom: 30px;
            position: absolute;
         }
         @keyframes myanim {
            20% {
               bottom: 100px;
            }
         }
      </style>
   </head>
   <body>
      <h2>bottomプロパティによるアニメーションの実行</h2>
      <div></div>
   </body>
</html>

コードのポイント

  • position: absolute; — 要素を絶対位置指定にすることで、bottom プロパティが有効になります。
  • animation: myanim 3s infinite; — 定義したキーフレーム「myanim」を3秒かけて再生し、無限に繰り返します。
  • @keyframes myanim — アニメーション全体の20%の時点で bottom を100pxに変化させ、その後元の値へと戻ります。ブラウザが自動的に補間し、なめらかな動きを実現します。

このように、@keyframes 内で bottom の値を段階的に変更するだけで、JavaScriptを使わずに純粋なCSSだけで位置のアニメーションを作成できます。0% や 50%、100% など複数のキーフレームを追加すれば、より複雑な動きも表現可能です。

  1. CSSのwidthプロパティをアニメーション化する方法

    CSSで要素の width（幅）プロパティをアニメーションさせるには、@keyframes ルールと animation プロパティを組み合わせて使用します。幅の変化を滑らかに表現することで、開閉パネルやホバーエフェクトなど、さまざまなインタラクティブな演出が可能になります。実装のポイント@keyframes 内で、アニメーションの途中経過（例：30%）における幅の値を指定します。animation プロパティで、キーフレーム名・再生時間などを設定します。幅は数値（px など）で指定するため、ブラウザは値の補間を行い滑らかなアニメーションを実現します。サンプルコード以下のコードでは、div要素

  2. CSSアニメーションでtransformプロパティをアニメーション化する方法

    CSSを使えば、transform プロパティにも簡単にアニメーションを適用できます。transform をアニメーション化することで、要素の回転・移動・拡大縮小などを滑らかで軽量な演出として表現可能です。ここでは、@keyframes と animation プロパティを組み合わせた基本的な実装方法を解説します。 実装のポイント @keyframes：アニメーションの進行度ごとに適用するスタイル（キーフレーム）を定義します。 animation：アニメーション名や再生時間（duration）などをまとめて指定できるショートハンドプロパティです。 transform：キーフレーム内で rot