CSS3 アニメーションの概要とアニメーション ライブラリの使用法 animate.css_html/css_WEB-ITnose

今の時代、CSS3の知識を少しでも知らなければアーティストと言うのは恥ずかしいことです。親愛なる妹、私をフロントエンドエンジニアと呼んでください。良い。 。さて、シージコープス。 。 。はは、包囲ゾンビとして、ハイエンドで高級なものなしでどうやってそれを実現できるでしょうか? それなら、CSS3 アニメーションは間違いなく価値があります。ただし、IE9 およびそれ以前のバージョンの IE ブラウザーは CSS3 アニメーションをサポートしていませんが、IE6 から 8 のブラウザーは衰退しています。 Google Chrome、Firefox、IE10+ などのブラウザーや、CSS3 アニメーションをサポートするモバイル ブラウザーを使用する人が増えているため、非常にシンプルであれば、より良いユーザー エクスペリエンスを得ることができる人もいます。

大きく言えば、CSS3 アニメーションは 2 つのタイプに分類できます。

トランジションアニメーション

1つ目はトランジションアニメーションと呼ばれるもので、初期状態から終了状態に遷移する過程で生成されるアニメーションです。いわゆる状態とは、サイズ、位置、色、変形などの属性を指します。 CSS トランジションは最初と最後の状態のみを定義できるため、最も単純な種類のアニメーションです。

要素のトランジション アニメーションを作成するには、まず要素のトランジション属性を使用してアニメーションのさまざまなパラメータを定義する必要があります。定義可能なパラメータは次のとおりです。

transition-property: 遷移するプロパティを指定します

transition-duration: 遷移時間を定義します。デフォルトは 0 です

transition-timing-function: フェードなどの遷移アニメーションのイージング効果を定義します-in、フェードアウトなど、デフォルトはeaseです

transition-delivery: トランジション効果の遅延時間を指定します。つまり、この時間の後にアニメーションが開始されます。デフォルトは0です

。記述の便宜上、これら 4 つの属性は、上記の順序で遷移属性で短縮することもできます:

属性のデフォルト値を使用したい場合は、省略できます:

以下と同等:

複数の属性を同時に遷移させたい場合は、次のようにコンマ On で区切ることができます。要素の変更が必要です。要素の状態を変更するには、当然、CSS でこの要素のクラスを定義します (:hover などの疑似クラスも可)。このクラスは、遷移アニメーションが終了するときの要素の状態を記述します。

このように、div にマウスを移動すると、div の状態が変化し、幅が 100 から 400、高さが 100 から 400、背景色が黒から赤に変化することがわかります。トランジション時間 3 秒間のトランジションエフェクトです。

hover や他のシステムによって提供される疑似クラスを使用することに加えて、独自のクラスを自由に定義し、遷移するときに js を介して要素にクラスを追加することもできます。

キーフレーム アニメーション

2 番目のタイプはキーフレーム アニメーションと呼ばれます。最初と最後の状態のみを定義できる最初のタイプのトランジション アニメーションとは異なり、キーフレーム アニメーションは複数の状態を定義できます。つまり、キーフレームの用語では、トランジション アニメーションは最初のフレームと最後のフレームの 2 つのキーフレームのみを定義できます。は任意の数のキーフレームを定義できるため、より複雑なアニメーション効果が可能になります。

キーフレーム アニメーションも特別な方法で定義されており、キーワード @keyframes を使用してアニメーションを定義します。具体的な形式は次のとおりです:

@keyframes アニメーション名 {

このコードでは、demo というファイルを定義しており、5 つのキーフレーム アニメーションがあります。 0%、10% などは、アニメーション全体の継続時間に相対的な時点を表します。時点の後の中括弧は、要素の状態属性のセットであり、この時点での要素の状態を示します。アニメーションが発生すると、最初の状態から 2 番目の状態に遷移し、次に 2 番目の状態から 3 番目の状態に遷移し、最後の状態に達します。一般に、2 つのキーフレーム 0% と 100% を定義する必要があります。

キーフレームの記述方法は非常に柔軟で、複数のキーフレームを 1 行に記述することができます。

それらの間のスペースさえもオプションです。

キーフレーム アニメーションを定義する方法がわかったので、このアニメーションをどのように実装すればよいでしょうか?実際には非常に簡単で、このアニメーションをアニメーション化する要素にバインドするだけです。

アニメーションを要素にバインドするには、アニメーション属性を使用できます。アニメーション属性には次のものが含まれます。

前述の遷移属性と同様に、これらのアニメーション属性もアニメーションに短縮することができ、デフォルト値を使用するものは省略することもできます。ただし、animation-play-state プロパティをアニメーションと短縮することはできません。

このように定義されたアニメーションを要素にバインドする限り、アニメーションをトリガーするために状態の変更が必要な最初の遷移アニメーションの代わりに、キーフレーム アニメーションを実装できます。

---------------------------------------------- --- --------------------------------------------------- --- -------------------

ブラウザ互換性の効果を最大限に高めるには、実際にコードを記述するときに、主要なブラウザも追加する必要があることに注意してください。プライベート プレフィックス

animate.css の使用法

animate.css は、github からダウンロードできる CSS3 アニメーション ライブラリです。このページで確認できます。まず、次のデモンストレーション エフェクトは、さまざまなアニメーションをさまざまなクラスにバインドするため、使用するのが非常に簡単です。そのため、どのアニメーションを使用したい場合も、対応するクラスを要素に追加するだけで済みます。ダウンロードした animate.css ファイルを head に挿入します

次に、アニメーション化する要素に、アニメーション化されたクラスと特定のアニメーション クラス名を追加します。アニメーション化する必要がある各要素にはクラスが必要です。追加した。

jquery を使用して、demo の ID を持つ要素に振るアニメーションを追加するとします。振るアニメーション クラスは Shake と呼ばれるため、コードは次のようになります。

この方法でページと要素を読み込みます。移動します。アニメーションの完了後にアニメーション クラスを削除して、同じアニメーションを再度実行できるようにすることもできます。

アニメーションの継続時間、アニメーションの実行数などのアニメーション設定パラメータについては、要素上で独自に定義でき、animate.css で定義されているパラメータを上書きするだけです。

これらの属性に注意し、各ブラウザのプレフィックスを忘れずに追加してください。

つまり、これは一目でわかるように非常に柔軟であり、必要に応じてクラス名を変更できます。それを変更するだけです。内部のアニメーションの一部だけを使用したい場合は、使用するアニメーションを分離することもできます。この機能は公式 Web サイトでも提供されています。