CSSアニメーション：CSS遷移を超えた動(dòng)的効果

CSSアニメーションは、CSSトランジションの高度なバージョンであり、キーフレームを使用して複雑なエフェクトを作成し、アニメーション再生中に一時(shí)停止することができます。この記事では、CSSアニメーションのあらゆる側(cè)面を検討して、この強(qiáng)力なWebデザインテクノロジーを簡単に習(xí)得できます。

CSSアニメーションの作成：キーフレームとアニメーションプロパティ

CSSアニメーションを作成するには、最初にアニメーション名を指定し、キーフレームルールをグループ化する@keyframesルールを定義する必要があります。次に、ターゲット要素にアニメーションを適用します。

CSSアニメーションは、animation-delay（アニメーション遅延）、animation-duration（アニメーションの持続時(shí)間）、animation-name（アニメーション名）、animation-timing-function（アニメーションタイミング関數(shù)）など、さまざまな屬性を通じて制御できます。 >（アニメーションの反復(fù)の數(shù)）、animation-iteration-count（アニメーションの方向）、animation-direction（アニメーション再生ステータス）、およびanimation-play-state（アニメーションフィルモード）。 animation-fill-mode

アニメーションコントロール：一時(shí)停止とループ

屬性を使用して、アニメーションを一時(shí)停止します。 animation-play-stateプロパティをanimation-iteration-countに設(shè)定すると、無限のループを?qū)g現(xiàn)できます。 infinite

パフォーマンスとアクセシビリティ：慎重にアニメーションを使用してください

CSSアニメーションはユーザーエクスペリエンスを向上させることができますが、たとえば、特定の病気の患者がアニメーションからめまいや吐き気を経験する可能性があるため、アクセシビリティのリスクをもたらす可能性があるため、注意して使用する必要があります。感光性てんかんのある人に使用される可能性。さらに、アニメーションのパフォーマンスもアニメーションプロパティの影響を受け、一部のプロパティはリフローまたは再描畫をトリガーする可能性があり、その結(jié)果、低パフォーマンスデバイスのパフォーマンスが低下します。

アニメーションとトランジションの違い：重要な違??い

CSSアニメーションと姉妹技術(shù)CSSの移行にはいくつかの重要な違いがあります：

• エレガントなダウングレード：アニメーションには、ブラウザがそれをサポートしていない場(chǎng)合、アニメーションが無効になり、JavaScriptが必要です。
• ループ：アニメーションは無期限に繰り返されます。
• キーフレーム：アニメーションは、キーフレームを使用して、より複雑で詳細(xì)な効果を作成します。
• 一時(shí)停止：再生サイクル中にアニメーションを一時(shí)停止できます。

ブラウザの互換性：主流のブラウザーサポート

すべての主流ブラウザの最新バージョンは、CSSアニメーションをサポートしています。 Firefox 15以前は

プレフィックスが必要です。 Internet Explorer 10および11、およびMicrosoft Edgeのすべてのバージョンも、接頭辭付きアニメーションをサポートしています。 -moz-

検出アニメーションサポート：javaScriptメソッド

CSSアニメーションサポートは、さまざまな方法で検出できます。最初の方法は、windowオブジェクトのCSSKeyframeRuleメソッドが存在するかどうかをテストすることです。

const hasAnimations = 'CSSKeyframeRule' in window;

ブラウザが

ルールと@supportsAPIをサポートしている場(chǎng)合、次の方法を使用できます。 CSS.supports()

const hasAnimations = CSS.supports('animation-duration: 2s');

最初のアニメーションを作成します：キーフレームルールとアニメーションアプリケーション<

最初に、ルールを使用してアニメーションを定義します。 ルールには2つの関數(shù)があります

アニメーション名@keyframesを設(shè)定します @keyframesグループキーフレームルール

たとえば、
：
• と呼ばれるアニメーションを作成します

次に、要素にアニメーションを適用します：

pulse

@keyframes pulse {
    from {
        transform: scale(0.5);
        opacity: .8;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

アニメーション屬性の詳細(xì)な説明：アニメーション効果を慎重に制御する

.pulse {
    animation: pulse 500ms;
}

shorthand屬性を使用することはより単純ですが、長い形式の屬性を使用することが明確になる場(chǎng)合があります。以下は、長い形式のアニメーションプロパティです

プロパティ 説明 初期値 animation-delay アニメーション実行の前の待ち?xí)r間 0S （今すぐ実行） アニメーション期間 アニメーションサイクル期間 0S （アニメーションなし） animation-name ルールの名前 なし アニメーション - ティミングファンクション 開始狀態(tài)と終了狀態(tài)の間の値を計(jì)算する方法 ease Animation-Iteration-Count アニメーションの繰り返しの數(shù) 1 animation-direction アニメーションは後方に再生されますか？ 通常（逆ではない） animation-play-state は、実行中または一時(shí)停止のアニメーションです 実行中 animation-fill-mode アニメーションが実行されていないときに適用される屬性値を指定 なし

ループアニメーション：Animation-Iteration-Count Attribution

animation-iteration-countプロパティをinfiniteに設(shè)定すると、アニメーションループを無限にすることができます。

アニメーションの方向：アニメーション方向?qū)傩?/strong>

animation-direction屬性は、アニメーションの再生方向を制御するために使用される4つの値の4つの値を受け入れます。 normal reversealternateパーセントキーフレーム：より複雑なアニメーションシーケンスを作成alternate-reverse

より複雑なアニメーションシーケンスは、パーセンテージキーフレームを使用して作成できます。

アニメーションフィルモード：Animation-Fill-Mode Attribution

屬性アニメーションが始まる前後の要素スタイルを制御します。

一時(shí)停止アニメーション：Animation-Play-State屬性animation-fill-mode

屬性を使用して、アニメーションを一時(shí)停止して復(fù)元します。

アニメーションイベントの検出：AnimationStart、AnimationEnd、およびAnimationationイベントanimation-play-state

javaScriptを使用して、、、

イベントを聞くことができます。

animationstartanimationendパフォーマンスの最適化：適切なアニメーション屬性を選択animationiteration

を選択します

一部のプロパティは、他のプロパティよりも優(yōu)れたパフォーマンスを発揮します。リフローや再描畫をトリガーするプロパティのアニメーションを避けてください。

faq

この記事には、CSSアニメーションに関するよくある質(zhì)問も含まれています。CSSアニメーションとCSSトランジション、アニメーション速度コントロール、ルールの役割、レイアウトアニメーション、リバース再生アニメーション、アニメーションの一時(shí)停止、アニメーションの違いをカバーする、無限ループアニメーション、SVG要素アニメーション、およびと

の違い。

この記事を研究することにより、より洗練された複雑なCSSアニメーションエフェクトを作成して、Webページのインタラクティブ性とユーザーエクスペリエンスを向上させることができます。 アニメーションを使用するときは、パフォーマンスとアクセシビリティに常に優(yōu)先順位を付けることを忘れないでください。 @keyframes

以上がCSSアニメーションを始める方法の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。