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

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

CSSのorderプロパティは、Flexboxレイアウトにおけるフレックスアイテムの表示順序を制御するためのプロパティです。整数値で指定し、値が小さいほど先頭に近い位置に配置されます。そして、@keyframesと組み合わせることで、このorderプロパティの値をアニメーションさせ、アイテムの並び順が入れ替わる様子を動的に表現することができます。

アニメーション実装のポイント

  • 親要素に display: flex; を指定してフレックスコンテナを作成する
  • @keyframes の中で order の値を変更するキーフレームを定義する
  • animation プロパティでアニメーション名・再生時間・繰り返し回数を設定する

サンプルコード

次のコードでは、黄色のボックスが3秒周期で4番目の位置へ移動するアニメーションを無限に繰り返します。

<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
  width: 600px;
  height: 180px;
  display: flex;
}
#inner {
  animation: myanim 3s infinite;
}
#demo1 div {
  width: 110px;
  height: 180px;
}
@keyframes myanim {
  30% {
    order: 4;
  }
}
</style>
</head>
<body>
<h1>CSS orderプロパティ</h1>
<div id="demo1">
  <div style="background-color:yellow;order:1;" id="inner"></div>
  <div style="background-color:blue;order:2;"></div>
  <div style="background-color:orange;order:3;"></div>
  <div style="background-color:pink;order:4;"></div>
  <div style="background-color:gray;order:5;"></div>
  <div style="background-color:maroon;order:6;"></div>
</div>
</body>
</html>

コードの解説

  • #demo1：幅600px・高さ180pxのフレックスコンテナです。6つの色付きボックスが横一列に並びます。
  • #inner：animation: myanim 3s infinite; を指定しており、3秒間のアニメーションを無限ループで再生します。
  • @keyframes myanim：再生時間の30%時点で order を「4」に変更することで、黄色いボックスがピンクのボックスの位置まで移動します。

このように、orderプロパティはアニメーション可能なプロパティであるため、キーフレームアニメーションで数値を補間しながら、フレックスアイテムの並び替えを滑らかに表現できます。カード型UIの並べ替え演出など、さまざまな場面で応用できるテクニックです。

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

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

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

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