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

CSSのtopプロパティをアニメーションさせる方法

CSSでは、topプロパティにも@keyframesを使ったアニメーションを適用できます。要素を上下に滑らかに移動させたい場合などに活用できるテクニックです。

以下は、topプロパティをアニメーションさせて、オレンジ色のボックスが下方向へ移動するサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            position: absolute;
            width: 300px;
            height: 200px;
            background-color: orange;
            color: white;
            top: 0;
            animation: myanim 3s infinite;
         }
         @keyframes myanim {
            30% {
               top: 300px;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS top property</h1>
      <div>
         <h1>This is demo text!</h1>
      </div>
   </body>
</html>

コードの解説

  • position: absolute; — topプロパティを有効にするために、要素を絶対配置に設定しています。
  • top: 0; — アニメーションの開始位置（画面上端）を指定します。
  • animation: myanim 3s infinite; — 定義したmyanimキーフレームを3秒かけて無限に繰り返します。
  • @keyframes myanim — アニメーションの進行度30%の時点でtop: 300px;へ移動するよう指定しています。その後、元の位置へ戻る動きを繰り返します。

このように、positionプロパティでabsoluteやrelativeなどを指定しておくことで、top・left・right・bottomといった位置プロパティを自由にアニメーションさせることができます。

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

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

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

    CSSのvertical-alignプロパティは、インライン要素やテーブルセル内のコンテンツの垂直方向の位置を揃えるために使われます。実は、このプロパティもCSSアニメーション（@keyframes）と組み合わせることで、滑らかにアニメーションさせることが可能です。以下のサンプルコードでは、画像のvertical-alignの値を3秒かけて変化させるアニメーションを実装しています。アニメーションの途中（50%の時点）で値が120pxに変化するように設定しています。サンプルコード<!DOCTYPE html> <html>    <head>