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

CSSアニメーションでvertical-alignプロパティを動かす方法を解説

CSSのvertical-alignプロパティは、インライン要素やテーブルセル内のコンテンツの垂直方向の位置を揃えるために使われます。実は、このプロパティもCSSアニメーション（@keyframes）と組み合わせることで、滑らかにアニメーションさせることが可能です。

以下のサンプルコードでは、画像のvertical-alignの値を3秒かけて変化させるアニメーションを実装しています。アニメーションの途中（50%の時点）で値が120pxに変化するように設定しています。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            vertical-align: 80px;
            animation: myanim 3s;
         }
         @keyframes myanim {
            50% {
               vertical-align: 120px;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS vertical-alignプロパティ</h1>
      <p><img src="https://www.tutorialspoint.com/latest/microservice_architecture.png" width="80" height="80">
         これはデモ用のテキストです。画像と同じ行に表示され、vertical-alignの値に応じて垂直位置が変化します。
      </p>
   </body>
</html>

コードのポイント

  • 初期値の設定： vertical-align: 80px; で、画像を行のベースラインから80px上に配置しています。
  • アニメーションの定義： animation: myanim 3s; により、3秒間のアニメーション「myanim」を適用しています。
  • @keyframesの活用： アニメーションの50%時点で vertical-align: 120px; に変化させることで、画像が徐々に上へ移動する演出になります。

このように、length値として指定できるvertical-alignは、キーフレームアニメーションと組み合わせることで、テキストと画像の位置関係を動的に変化させることができます。ブラウザで実行して、画像がスムーズに移動する様子を確認してみてください。

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

    CSSでtext-shadowプロパティをアニメーション化するには、@keyframesルールとanimationプロパティを組み合わせます。以下のサンプルコードをブラウザで実行すると、テキストシャドウが時間の経過とともに滑らかに変化していく様子を確認できます。 サンプルコード <!DOCTYPE html> <html>    <head>       <style>        &n

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

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