CSS3アニメーションシリーズ_html/css_WEB-ITnose

これを書いたのは 2010 年 5 月です。当時、CSS3 アニメーションは基本的に Webkit ベースのブラウザーでのみ利用可能でした。現在、CSS3 はさまざまなプロジェクトで広く使用されており、徐々に必須のものになってきています。フロントエンド開発エンジニアのスキルを身につけます。私はプロジェクトでいくつかのエクスペリエンスを最適化するために CSS3 をよく使用しますが、常に知識が足りないと感じているため、最近過去を振り返り、新しいことを学び、まとめました。皆さんの議論を歓迎します。

要約すると、ここで説明する CSS3 アニメーションには 2 つのタイプが含まれます:

1. Transition-transition

2. Animation - アニメーション

これらはすべて Web ページを「移動」させます。これら 2 つの関数は似ていますが、両者の間には微妙な違いがあります。

Transition (transition) ) はトゥイーンです。要素の始点からの状態と終点の状態を定義することで、一定時間内での要素の滑らかな遷移や変化を実現するアニメーション機構。

アニメーション (アニメーション) は、開始点からの要素の状態と終了点の状態を定義できるだけでなく、任意の 2 点間の要素のキーフレーム (キーフレーム) の状態も定義できます。指定された時刻に 要素内の要素のスムーズな遷移または変更を実現するトゥイーン アニメーション メカニズム。

トランジションを使用して単純なトランジション効果を作成する場合、要素には開始点の状態と終了点の状態、アニメーションの開始時間 (transition-lay) と継続アクション時間 (transition-duration) の属性が含まれます。 ) およびアクションの変換速度 (transition-timing-function)。これにより、単純なアニメーションを実行できます。たとえば、最初の期間でどのようなアクションを実行し、2 番目の期間でどのようなアクションを実行するかをより詳細に制御したい場合、トランジションを使用してこれを実現するのは困難になります。 . このとき、キーフレーム（キーフレーム）が必要です。より正確な制御のために、要素は指定された時間内でキーフレーム間をスムーズに移行または変更できます。

2 つの概略図を描きました:

1 秒以内に特定の要素の色のみを変更する遷移概略図:

次のステップはアニメーション (アニメーション) ダイアグラム。最初の 1 秒で要素を大きくし、次の 2 秒で要素の色を変更し、要素を元のサイズに戻します:

実際、トランジションでは、以下の開始点と終了点もキー フレームとして理解できますが、これら 2 つの点の間にキー フレームを定義することはできません。一方、アニメーションでは、開始点と終了点の間に任意のキー フレームを定義できます。アニメーションに関しては、指定された時間内で 2 つのキー フレーム間の要素のスムーズな遷移または変更を実現するトゥイーン アニメーション機構です。 Dangru アニメーションの前提は、2 つのキー フレーム間に要素のステータスの違いがあることです。たとえそれがわずかな違いであっても、もちろん、私たちの肉眼ではそれを見ることができない場合があります。

これまでに Flash アニメーションを作成したことがあれば、トランジションとアニメーションを理解するのは非常に簡単です。私が書いたことが理解できない場合は、フラッシュ アクション トゥイーン アニメーションに関するこのビデオ チュートリアルをご覧ください。

CSSトランジションとは、要素の始点からの状態と終点の状態を定義することで、一定時間内での要素のスムーズな遷移や変化を実現するトゥイーンアニメーションの仕組みです。プロパティの変更をすぐに有効にするのではなく、一定期間をかけて実行することができます。

トランジションを使用すると、どのプロパティをアニメーション化するか (明示的にリストすることによって)、アニメーションをいつ開始するか (遅延を設定することによって)、アニメーションの持続時間 (継続時間を設定することによって)、およびアニメーション化する方法 (設定によって) を決定できます。期間) タイミング関数を定義することによって (直線的、または速く開始してゆっくりと終了するなど)。

まずこの例を見てみましょう: http://www.css88.com/demo/css3_transition/demo1.html

トランジションを定義する方法

トランジションも次の 4 つのサブプロパティがあります。

• transition-property、変換の期間:

• transition-duration、変換中の継続期間、

• transition-timing-function、変換の速度変化

• transition-lay: 変換遅延時間。

定義も非常に柔軟です。まず、次の 4 つのサブプロパティを紹介します。

transition-property (transition プロパティ)

1. 要素の変更時にトランジションを実行する属性、ブラウザーのリフローまたは再描画をトリガーできる属性、アニメーション化できる CSS 属性を個別に指定できます。参照: https://developer.mozilla.org/zh- CN/docs/CSS /CSS_animated_properties すべての CSS プロパティがここにリストされ、アニメーションが可能であれば、その設定方法が説明されます。

2. は all として指定でき、要素のいずれかの遷移属性の値が変化したときに遷移効果が実行されます。

3. none を指定すると、アニメーションをすぐに停止できます。

4. 初期デフォルト値はすべて

構文:

transition-property: none | all |[<IDENT>][,<IDENT>]*

例:

transition-property: all;transition-property: none;transition-property: background-color;transition-property: background-color, height, width;

移行期間 (移行期間)

1. 要素遷移プロセスの継続時間、時間値、1s (秒)、4000ms (ミリ秒) を指定するために使用されます。

2. デフォルト値は 0 で、これはトランジション効果がないことも理解できます。

構文:

transition-duration:<time>[,<time>]*

例:

transition-duration:2s;transition-duration:4000ms;transition-duration:1s,800ms;

transition-timing-function (遷移時間関数)

CSS 属性の変換率を指定します。デフォルト値は、ease、linear、ease-in、ease-in-out、cubic-bezier(x1, y1, x2, y2) です。簡単です:

1. ease: (徐々に遅くなる) デフォルト値、ベジェ曲線 (0.25、0.1、0.25、1.0) に相当します。

2. リニア: (一定速度)、ベジェ曲線 (0.0、0.0、1.0、1.0) と同等。

3. イーズイン: (加速度)、ベジェ曲線 (0.42、0 、 1.0, 1.0).

4. イーズアウト: (減速)、ベジェ曲線 (0, 0, 0.58, 1.0) と同等。

5. ease-in-out: (加速してから減速)、ベジェ曲線 (0.42, 0, 0.58, 1.0) と同等

6. cubic-bezier は属性値です「変換」処理におけるP1(x1,y1)とP2(x2,y2)の座標を変更することで、以下の曲線のようにベジェ曲線で計算され、処理全体の出力割合を変更することができます。 。 w3c ドキュメントには、すべての値が [0, 1] 領域内になければならず、そうでない場合は無効になると記載されています。ただし、一部のブラウザ (Chrome、Firefox、Opera、IE11 プレビュー バージョン) では、P1(x1, y1) および P2(x2, y2) の座標における y1 および y2 にそのような制限はありません。曲線は負の値になる可能性があります。値も 1 より大きい値を取ることができます。 x1 と x2 が負の数であるか、1 より大きい値である場合、最終的なスタイルはトランジション効果なしで直接適用されます。一部の古いバージョンのブラウザのカーブ値は [0, 1] 領域内にある必要があります。そうでない場合は、最終的なスタイルが直接適用されます (Opera 12 など)。その他のブラウザの古いバージョンはテストされていません。以下のデモの最後のケースをご覧ください - 素晴らしい!

デモをチェックしてください: さまざまなタイミング関数のデモ http://css88.com/demo/ css3_transition/

2 つのシンプルで直感的な cubic-bezier() ベジェ曲線設定ツールをお勧めします:

http://www.webstuffshare.com/2012/04/showing-product-information-with - css3-3d-transform/

http://cubic-bezier.com/

注: step-start、step-end、steps(979e7f42ea08258251c39ffe96b911f2[, [ start について) | end ] ]?) ここでは値については説明しません。 http://www.w3.org/TR/css3-transitions/#transition-timing-function-property および http://www を参照してください。 .css88.com /archives/5403/https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

transition-delay (遷移遅延関数)

アニメーションの実行を開始する時間、つまり要素の属性値を変更してから「変形効果」の実行を開始するまでの時間を指定します。初期のデフォルト値は 0 です。 🎜> 構文:

transition-delay:<time>[,<time>]*

例:

transition の省略形

transition-delay:5s;transition-delay:4000ms,8000ms;transition-delay:-5s;

Transition は省略できます。

構文:

transition:<transition>[,<transition>]*<transition>=<transition-property><transition-duration><transition-timing-function><transition-delay>

例:

その他のケース: 属性値リストの長さが矛盾する場合

transition: background-color 3s linear 1s;transition:width 2s ease-in 2000ms,border 2s linear,height 5s, background-color 2s, transform 2s;transition:4s ease-in-out;transition:5s;

遷移プロパティの値リストの長さを基準として、プロパティ値リストの長さがその長さより短い場合、重複する値は同じ長さになります。例:

は次のように処理されます:

div { transition-property: opacity, left, top, height; transition-duration:3s,5s;}

同様に、プロパティの値リストが遷移プロパティの値リストより長い場合、切り捨てられます。 例:

div { transition-property: opacity, left, top, height; transition-duration:3s,5s,3s,5s;}

は次のように処理されます:

div { transition-property: opacity, left; transition-duration:3s,5s,2s,1s;}

アニメーション効果を実行するには?

div { transition-property: opacity, left; transition-duration:3s,5s;}

CSS3 アニメーションは通常、マウス イベントまたはマウスの状態を通じてアニメーションを定義し、CSS で疑似クラスを使用したり、要素のスタイル属性を変更したり、スタイルを追加および削除して定義されたアニメーションを実行したりできます。

CSS の疑似クラスの実行アニメーションには次が含まれます:

:hover

動的疑似クラス

动态伪类	起作用的元素	描述
:link	只有链接	未访问的链接
:visited	只有链接	访问过的链接
:hover	所有元素	鼠标经过元素
:active	所有元素	鼠标点击元素
:focus	所有可被选中的元素	元素被选中

要素その動作

説明

:link

リンクのみ

未訪問のリンク

:訪問済み

リンクのみ

訪問済みのリンク

すべての要素

要素の上にマウスを置く

:active

すべての要素 td> td>

要素上でマウスをクリック

:focus

選択できるすべての要素

要素が選択されています

上の例では、CSS の疑似クラスを使用してアニメーションを実行しています。 js を使用して要素のスタイル属性を変更したり、スタイルを追加および削除してアニメーションを実行します。 一般に、マウス イベント操作とタイミング操作 (window.setTimeout()、window.setInterval());

参照 この例を見てください: http://www.css88.com/demo/css3_transition/demo2.html

また、要素が遷移を使用する場合は、.appendChild() を使用してすぐに実行することにも注意してください。 DOM に追加するか、その表示を削除します: none;。これは、初期状態が存在しなかったかのように見え、要素は常に最終状態になります。この制限を克服する最も簡単な方法は、非常に数ミリメートルで window.setTimeout() を使用することです。

概要:transitionend イベント

CSS のtransition-property 属性の削除など、CSS トランジションが完了する前にトランジションが削除またはキャンセルされると、transitionend イベントがトリガーされます。このイベントはトリガーされません。兄弟ブラウザでのイベントのサポート

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

1.0 webkitTransitionEnd 開始

4.0 (2.0) transitionend 開始

10 transitionend 開始

10.5 oTransitionEnd の開始 12 otransitionend の開始

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
1.0 开始 webkitTransitionEnd	4.0 (2.0) 开始 transitionend	10开始 transitionend	10.5 开始 oTransitionEnd 12 开始 otransitionend 12.10 开始 transitionend	3.2 开始 webkitTransitionEnd

12.10

の開始 transitionend

3.2 webkitTransitionEnd の開始

この例を見てください: http://www.css88.com/demo/css3_transition/demo3.html

この例からわかるように、各遷移属性が完了すると、transitionend イベントがトリガーされます。たとえば、このイベントはブラウザーでも不一致があります。たとえば、Webkit でトリガーされるのは

Transition 属性: 2

そして、Firefox の出力:

Transition プロパティ: border-left-color; Time: 2

Transition プロパティ: border-bottom-color; 時間: 2

遷移プロパティ: border-right-color; 時間: 2

遷移プロパティ: border-top-color; 時間: 2

遷移プロパティ: border-left-width; 2

遷移プロパティ: border-bottom-width; 時間: 2

遷移プロパティ: border-right-width; 時間: 2 遷移プロパティ: border-top- width; Time: 2

使用時に全ての属性が遷移したかどうかを判断するか、特定の属性名がイベントを実行しているかを判断することを推奨します。

1. トランジションとアニメーションの違い:

2. トランジションが完了すると、トランジション後の状態が保持されますが、アニメーションはデフォルトの状態にジャンプします

後者はより正確で、すべてのフレームで制御できますが、前者はスムーズな移行です。

参考記事：

http://www.w3.org/TR/css3-transitions/

http://www.css88 .com/archives/5403/https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

http://css3.bradshawenterprises.com/transitions/ http://www.css88.com/archives/5403/https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend