CSSアニメーションを始める方法

CSSアニメーション：CSS遷移を超えた動的効果

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

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

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

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

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

属性を使用して、アニメーションを一時停止します。 animation-play-stateプロパティをanimation-iteration-countに設定すると、無限のループを実現できます。 infinite

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

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

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

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

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

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

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

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

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

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

<code class="language-javascript">const hasAnimations = 'CSSKeyframeRule' in window;</code>

ブラウザが

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

<code class="language-javascript">const hasAnimations = CSS.supports('animation-duration: 2s');</code>

最初のアニメーションを作成します：キーフレームルールとアニメーションアプリケーション最初に、ルールを使用してアニメーションを定義します。 ルールには2つの関数があります

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

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

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

pulse

<code class="language-css">@keyframes pulse {
    from {
        transform: scale(0.5);
        opacity: .8;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}</code>

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

<code class="language-css">.pulse {
    animation: pulse 500ms;
}</code>

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

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

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

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

アニメーションの方向：アニメーション方向属性

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

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

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

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

一時停止アニメーション：Animation-Play-State属性animation-fill-mode

属性を使用して、アニメーションを一時停止して復元します。

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

javaScriptを使用して、、、

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

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

を選択します

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

faq

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

の違い。

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

以上がCSSアニメーションを始める方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。