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

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

CSSでは、z-indexプロパティもアニメーションの対象にできます。@keyframesルールの中でz-indexの値を段階的に変化させることで、要素の重なり順序を時間の経過とともに動的に変更できます。以下のコードを実行して、その動作を確認してみましょう。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            position: absolute;
         }
         #box div {
            background-color: orange;
            border: 2px solid yellow;
            width: 100px;
            height: 100px;
            opacity: 0.3;
         }
         div#demo {
            opacity: 1;
            background-color: coral;
            z-index: 1;
            animation: myanim 3s;
         }
         @keyframes myanim {
            30% {
               z-index: 3;
            }
         }
      </style>
   </head>
   <body>
      <h1>CSS z-index property</h1>
      <div id = "box">
         <div id = "demo"></div>
         <div style = "top:20px;left:20px;z-index:1;">One</div>
         <div style = "top:40px;left:40px;z-index:2;">Two</div>
         <div style = "top:60px;left:60px;z-index:3;">Three</div>
         <div style = "top:80px;left:80px;z-index:4;">Four</div>
         <div style = "top:100px;left:40px;z-index:5;">Five</div>
         <div style = "top:120px;left:60px;z-index:6;">Six</div>
         <div style = "top:140px;left:80px;z-index:7;">Seven</div>
      </div>
   </body>
</html>

コードのポイント

  • アニメーションの定義： @keyframes myanim の中で、アニメーション開始から30%経過した時点（約0.9秒後）に z-index を「1」から「3」へ変化させています。
  • 適用対象： animation: myanim 3s; により、#demo 要素に対して3秒間のアニメーションが設定されています。
  • 重なりの確認： 各ボックスは半透明（opacity: 0.3）にしているため、z-index の値が変わると重なり順序の変化が視覚的にわかりやすくなっています。

注意点

z-index を有効にするには、対象要素に position: absolute; や position: relative; など、static 以外の position 値が指定されている必要があります。このサンプルではすべての div 要素に position: absolute; を設定しているため、正しく重なり順が制御されます。

  1. CSSでheight（高さ）プロパティをアニメーションさせる方法

    CSSで要素のheight（高さ）プロパティをアニメーションさせたい場合は、@keyframesルールとanimationプロパティを組み合わせて使います。以下のサンプルコードを実行すると、div要素の高さが一定間隔で滑らかに変化するアニメーションを確認できます。 サンプルコード <!DOCTYPE html> <html>   <head>     <style>       div {    &

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

    CSSのorderプロパティは、Flexboxレイアウトにおけるフレックスアイテムの表示順序を制御するためのプロパティです。整数値で指定し、値が小さいほど先頭に近い位置に配置されます。そして、@keyframesと組み合わせることで、このorderプロパティの値をアニメーションさせ、アイテムの並び順が入れ替わる様子を動的に表現することができます。 アニメーション実装のポイント 親要素に display: flex; を指定してフレックスコンテナを作成する @keyframes の中で order の値を変更するキーフレームを定義する animation プロパティでアニメーション名・再生時間