基本的なアニメーションはシンプルです。キーフレームを定義し、アニメーションに名前を付け、要素に適用します。しかし、理想的なアニメーション効果を?qū)g現(xiàn)するには、より複雑な手法が必要になる場合があります。たとえば、サウンドイコライザーは各バーに同じアニメーションを使用する場合がありますが、獨立したアニメーションの幻想を作成するためにインターリーブされます。

最近、ダッシュボードを構(gòu)築するときは、ウィジェットの1つのアイテムがインターレースアニメーションに表示されたいと考えています。

上記のサウンドイコライザーのように、私は:nth-childセレクターを使用し始めました。順序付けられていないリストを使用します（<ul></ul> ）親コンテナとして、クラスを提供し、次のクラスを使用して:nth-child pseudoセレクターを使用して、各リスト項目のアニメーションをanimation-delayによって相殺します。

 .My-ListLi {
  アニメーション：My-Animation 300ms Ease-Out;
}

.my-list li：nth-??child（1）{
  アニメーション遅延：100ms;
}

.my-list li：nth-??child（2）{
  アニメーション遅延：200ms;
}

.my-list li：nth-??child（3）{
  アニメーション遅延：300ms;
}

/* 等々*/

この手法は、特にいつでもリストにあるアイテムの數(shù)がわかっている場合、アイテムを非常によく驚かせます。ただし、このアプローチは、アイテムの數(shù)が予測不可能な場合に失敗します（これは、ダッシュボード用に構(gòu)築したウィジェットの場合です）。リスト內(nèi)のアイテムの數(shù)が変更されるたびにこのコードに戻りたくないので、最大50個のアイテムを処理し、各アイテムが増加するにつれてアニメーションのレイテンシを追加できるクイックSASSループを書きました。

 .my-list {
  li {
    アニメーション：My-Animation 300ms Ease-Out;

    @for $ i 1?50 {
      ＆：nth-??child（＃{$ i}）{
        Animation-Delay：100ms * $ i;
      }
    }
  }
}

これは問題を解決するはずです！しかし、それはあまりにも不器用に感じます。もちろん、ファイルにあまり多くの重量を追加することはありませんが、コンパイルされたCSSには、 nth-child(45) 。

より良い方法がなければなりません。通常、私はすべてのプロジェクトを見つけて遅延を追加するためにJavaScriptに頼りますが、今回はCSSで単獨で行うことができるかどうかを探索するのに少し時間を費やしました。

CSSカウンターはどうですか？

最初に思い浮かぶのはcalc()関數(shù)を使用してCSSカウンターを使用することです。

 .my-list {
  カウンターレセット：私の店。
}

.My-ListLi {
  カウンターインクリメント：私の店。
  Animation-Delay：Calc（Counter（My Counter） * 100ms）;
}

殘念ながら、これは機能しません。仕様では、カウンターはcalc()では使用できないと述べているためです。

calc()のコンポーネントは、リテラル値またはattr() 、またはcalc()式になります。

一部の人々はこのアイデアを好むことがわかりますが、それはまだドラフトステージから外れていません。

データ屬性はどうですか？

仕様からの抜粋を読んだ後、 calc() attr()を使用できることを?qū)Wびました。そして、CSSの値とユニットの仕様に従って：

CSS3では、 attr()式はさまざまなタイプの値を返すことができます

これは私に思い出させます。たぶん、データ屬性が問題を解決できる可能性があります。

• アイテム1
• アイテム2
• アイテム3
• アイテム4

.My-ListLi {
  Animation-Delay：calc（attr（data-count） * 150ms）;
}

しかし、このブラウザのサポートが非常に悪いので、私の希望は打ち砕かれています！

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番號は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレットPC

したがって、図面に戻ります。

カスタムプロパティはどうですか？

私の次のアイデアは、CSSを使用してプロパティをカスタマイズすることです。きれいではありませんが、機能しますか？

柔軟性もあります。たとえば、アニメーションを逆にすることができます。

また、完全にランダムな要素とアニメーションの要素を同時に行うこともできます。

さらに一歩進んで、斜めのスイングを行うこともできます。

ブラウザのサポートはそれほど悪くありません（インターネットエクスプローラーをポップアップします）。

このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番號は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

デスクトップ

モバイル/タブレットPC

CSSの優(yōu)れた特徴は、カスケードのおかげで、理解していないことを無視することです。これは、すべてが一緒にビューにアニメーション化されることを意味します。これがあなたのスタイルではない場合は、機能クエリを追加してデフォルトのアニメーションをオーバーライドできます。

 .My-ListLi {
  アニメーション：フォールバックアニメーション。
}

@supports（-variables）{
  .My-ListLi {
    アニメーション：ファンシーアニメーション。
    Animation-Delay：calc（var（ -  animation-order） * 100ms）;
  }
}

ネイティブCSS Long Live

JavaScriptが必要かどうかを自問するほど、CSS自體ができることに驚きました。もちろん、CCSSカウンターをcalc()関數(shù)で使用できる場合、これは非常にエレガントなソリューションになります。しかし今のところ、インラインカスタムプロパティは、この問題を解決するための強力で柔軟な方法を提供します。

以上がよろめくアニメーションを作成するためのさまざまなアプローチの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。