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

CSSでトランジション効果を作成する方法をわかりやすく解説

CSSでトランジション効果を作成する基本

CSSでトランジション（遷移）効果を作成するには、transitionプロパティを使用します。このプロパティには、変化させたいCSSプロパティの名前と、アニメーションが完了するまでの時間（duration）を指定します。

transition: height 5s;

上記の例では、heightプロパティの値が5秒かけて滑らかに変化します。なお、durationを指定しない場合はデフォルト値の0秒が適用されるため、変化が即座に行われ、トランジション効果は見えなくなりますので注意してください。

実装サンプル

以下のコードでは、ボックスにマウスカーソルを合わせると（hover）、幅が3秒かけて滑らかに広がるトランジション効果を実装しています。実際にブラウザで動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 150px;
            background: blue;
            transition: width 3s;
         }
         div:hover {
            width: 250px;
         }
      </style>
   </head>
   <body>
      <h1>見出し</h1>
      <p>下のボックスにマウスカーソルを合わせると、幅が変化します。</p>
      <div></div>
   </body>
</html>

コードのポイント

  • transition: width 3s; … widthプロパティの変化を3秒かけて実行するよう指定しています。
  • div:hover … マウスオーバー時のスタイルを定義し、widthを250pxへ変更することで、滑らかなアニメーションが発生します。
  • 複数のプロパティをアニメーションさせたい場合は、「transition: width 3s, height 2s;」のようにカンマで区切って指定できます。
  1. CSSだけで作る視差スクロール（パララックス）効果の実装方法

    CSSだけで視差スクロール（パララックス）効果を実現するには、background-attachment: fixed; を使用します。このプロパティを指定すると、背景画像がブラウザの表示ブラウザの表示領域（ビューポート）に固定され、ページをスクロールしても背景だけが動かなくなります。その結果、前景のコンテンツと背景との間に速度の違いが生まれ、奥行きのある視差効果を演出できます。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=

  2. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>