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

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

上記のサウンドイコライザーのように、私は:nth-childセレクターを使用し始めました。順序付けられていないリストを使用します（<ul></ul> ）親コンテナとして、クラスを提供し、次のクラスを使用して:nth-child pseudoセレクターを使用して、各リスト項(xiàng)目のアニメーションを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ù)がわかっている場(chǎng)合、アイテムを非常によく驚かせます。ただし、このアプローチは、アイテムの數(shù)が予測(cè)不可能な場(chǎng)合に失敗します（これは、ダッシュボード用に構(gòu)築したウィジェットの場(chǎng)合です）。リスト內(nèi)のアイテムの數(shù)が変更されるたびにこのコードに戻りたくないので、最大50個(gè)のアイテムを処理し、各アイテムが増加するにつれてアニメーションのレイテンシを追加できるクイック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で単獨(dú)で行うことができるかどうかを探索するのに少し時(shí)間を費(fèi)やしました。

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

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

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

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

殘念ながら、これは機(jī)能しません。仕様では、カウンターは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のデータをサポートしています。これには詳細(xì)が含まれています。番號(hào)は、ブラウザがこのバージョン以降でこの機(jī)能をサポートしていることを示しています。

デスクトップ

モバイル/タブレットPC

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

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

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

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

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

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

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

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

デスクトップ

モバイル/タブレットPC

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

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

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

ネイティブCSS Long Live

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

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