アニメーション方向のプロパティは何をしますか（たとえば、代替）？-CSSチュートリアル-php.cn

どのような値を使用できますか？

alternate実際にどのように機能しますか？

animation-directionいつ使用する必要がありますか？

ホームページ

ウェブフロントエンド

CSSチュートリアル

アニメーション方向のプロパティは何をしますか（たとえば、代替）？

Karen Carpenter

Jun 24, 2025 am 12:23 AM

CSSアニメーション

CSSのアニメーション方向プロパティは、サイクル全体のアニメーションの方向を制御し、4つの値を提供します。1。通常のアニメーションを毎回進め、2。逆に再生します。3。特にUI遷移や連続的なバックグラウンドアニメーションで、急激なリセットなしの前後の動きなどのスムーズなループ効果に役立ちます。

アニメーション方向のプロパティは何をしますか（たとえば、代替）？

CSSのanimation-directionプロパティは、アニメーションが再生する方向を制御します。各サイクルでアニメーションが正常に実行されるか、リバース、またはフォワードとバックワードを交互に実行するかを決定します。

このプロパティは、最初の反復後にアニメーションがどのように動作するかをさらに制御したい場合に特に便利になります。たとえば、スタートに戻ることなくスムーズにループするようにします。

どのような値を使用できますか？

animation-directionには4つの主要な値があり、それぞれが再生動作を変更します。

通常- アニメーションは毎回最初から最後まで再生されます。
逆- エンドからスタートまで、アニメーションを逆方向に再生します。
代替- すべてのサイクルで方向を逆にします。したがって、最初に正常で、次に逆、次に再び正常になります。
代替リバース- アニメーションを逆に再生することから始めてから、各サイクルと方向を交互にします。

これらのオプションは、あなたが目指している視覚効果に応じて柔軟性を与えます。

`alternate`実際にどのように機能しますか？

animation-direction: alternateは、アニメーションが最初のサイクルで前方に再生されることを意味し、次に2番目のサイクルで、3番目のサイクルで再び前進することを意味します。

要素を左から右に移動するシンプルなフェードイン/フェードアウトアニメーションがあるとしましょう。 alternateとともに、要素は左から右に移動し、右から左に移動し、次に左から右に再び移動します。すべてが突然リセットされません。

これは、アニメーションが毎回最初に「ジャンプ」したくないスムーズなループ効果に最適です。

これが基本的な例です。

 @KeyFramesスライド{
  {transform：translatex（0）; }
  {transform：translatex（100px）; }
}

。箱 {
  アニメーション名：スライド;
  アニメーションデュレーション：1秒;
  アニメーション方向：代替;
  Animation-Iteration-Count：Infinite;
}

この場合、 .box要素が右にスライドし、左にスライドします。

`animation-direction`いつ使用する必要がありますか？

このプロパティは次のとおりです。

オンとオフの両方でスムーズに見える必要があるホバーアニメーションを作成します（スケーリングまたは回転するアイコンなど）。
連続的な背景効果の設計（例えば、雲の移動またはスクロールテキスト）。
急激なリセットなしでUI要素を行き来するようにします。

たとえば、画面上を移動するロードバーをアニメーション化している場合、 alternateを使用すると、各ループの端でその耳障りなリセットを避けることができます。

予想される動作が表示されていない場合は、 animation-iteration-countが十分に高く設定されている（またはinfiniteに）ダブルチェックします。そうしないと、方向はそれほど重要ではありません。

また、 animation-direction複数のキーフレームを持つアニメーションにのみ影響することに注意してください。単一フレームのアニメーションは方向性の変更を示しません。

したがって、基本的に、 animation-direction複数のサイクルでアニメーションがどのように流れるかを制御することができます。追加のコードなしでシームレスな前後の効果を必要とする場合、 alternateを使用することは特に役立ちます。

以上がアニメーション方向のプロパティは何をしますか（たとえば、代替）？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

PHP チュートリアル

1583

276

Related knowledge

CSS アニメーションガイド: 稲妻効果を作成する方法を段階的に説明します。 Oct 20, 2023 pm 03:55 PM

CSS アニメーションガイド: 稲妻効果を作成する方法を段階的に説明します。はじめに: CSS アニメーションは、現代の Web デザインに不可欠な部分です。 Web ページに鮮やかな効果とインタラクティブ性をもたらし、ユーザーエクスペリエンスを向上させることができます。このガイドでは、CSS を使用して稲妻効果を作成する方法と、具体的なコード例を詳しく見ていきます。 1. HTML 構造を作成します。まず、雷の効果に対応する HTML 構造を作成する必要があります。 <div> 要素を使用して稲妻効果をラップし、

CSS アニメーションチュートリアル: ページめくり効果を実現する方法を段階的に説明します Oct 24, 2023 am 09:30 AM

CSS アニメーションチュートリアル: ページめくり効果を実装する方法を段階的に説明します。特定のコードサンプルが必要です。 CSS アニメーションは、現代の Web サイトデザインの重要な部分です。 Web ページに鮮やかさを加え、ユーザーの注目を集め、ユーザーエクスペリエンスを向上させることができます。一般的な CSS アニメーション効果の 1 つは、ページめくり効果です。このチュートリアルでは、この目を引く効果を実現する方法を段階的に説明し、具体的なコード例を示します。まず、基本的な HTML 構造を作成する必要があります。コードは次のとおりです: <!DOCTYPE

CSS アニメーションチュートリアル: 流れる水の特殊効果を段階的に説明します。 Oct 21, 2023 am 08:52 AM

CSS アニメーションチュートリアル: 流れる水の特殊効果を実装する方法を段階的に説明します。特定のコードサンプルが必要です。前書き: CSS アニメーションは、Web デザインで一般的に使用されるテクノロジです。Web ページをより生き生きと面白くし、ユーザーを引き付けます。 ' 注意。このチュートリアルでは、CSS を使用して水の流れの効果を実現する方法を学び、具体的なコード例を示します。はじめましょう！ステップ 1: HTML 構造まず、基本的な HTML 構造を作成する必要があります。ドキュメントの <body> タグに <di を追加します

CSS を使用してマウスホバリング時のジッター効果を実現するためのヒントと方法 Oct 21, 2023 am 08:37 AM

CSS を使用してマウスホバリング時のジッター効果を実現するためのヒントと方法マウスホバリング時のジッター効果は、Web ページにダイナミクスと面白さを追加し、ユーザーの注意を引くことができます。この記事では、CSS を使用してマウスホバーのジッター効果を実現するいくつかのテクニックと方法を紹介し、具体的なコード例を示します。ジッターの原理 CSS では、キーフレームアニメーション (キーフレーム) と変換プロパティを使用して、ジッター効果を実現できます。キーフレームアニメーションを使用すると、アニメーションシーケンスを次のように定義できます。

CSS アニメーションチュートリアル: パルス効果を実装する方法を段階的に説明します。 Oct 21, 2023 pm 12:09 PM

CSS アニメーションチュートリアル: パルス効果を実装する方法を段階的に説明します。具体的なコード例が必要です。はじめに: CSS アニメーションは、Web デザインで一般的に使用される効果です。Web ページに活力と視覚的な魅力を加えることができます。この記事では、CSS を使用してパルス効果を実現する方法を深く理解し、それを段階的に完了する方法を説明する具体的なコード例を示します。 1. パルスエフェクトを理解するパルスエフェクトは周期的なアニメーションエフェクトで、通常はボタン、アイコン、またはその他の要素に鼓動や点滅の効果を与えるために使用されます。 CSS を使用したプロパティとキーのアニメーション化

CSS アニメーションチュートリアル: フェードインおよびフェードアウト効果を実現する方法を段階的に説明します。 Oct 18, 2023 am 09:22 AM

CSS アニメーションチュートリアル: フェードイン効果とフェードアウト効果を実装する方法を段階的に説明します。具体的なコード例も含まれます。Web デザインと開発では、アニメーション効果を使用してページをより鮮やかで魅力的にすることができます。 CSS アニメーションは、この効果を実現する簡単かつ強力な方法です。この記事では、CSS を使用してフェード効果を実現する方法を段階的に説明し、参考用の具体的なコード例を示します。 1. フェードイン効果フェードイン効果とは、要素の透明度 0 から透明度 1 まで徐々に変化する効果を指します。フェードイン効果を実現する手順とコード例は次のとおりです。ステップ 1:

CSS アニメーションプロパティの探索: トランジションとトランスフォーム Oct 20, 2023 pm 03:54 PM

CSS アニメーションプロパティの探索: 遷移と変換 Web 開発では、Web ページのインタラクティブ性と視覚効果を高めるために、CSS アニメーションを使用して要素の遷移と変換を実現することがよくあります。 CSS には、アニメーション効果を実現するためによく使用されるプロパティが 2 つあります。それは、transition とtransform です。この記事では、これら 2 つのプロパティの使用法を詳しく説明し、具体的なコード例を示します。 1. 遷移属性transitio

CSS を使用して画像表示の特殊効果を実現するためのヒントと方法 Oct 24, 2023 pm 12:52 PM

CSS を使用して画像表示の特殊効果を実現するためのヒントと方法 Web デザインでもアプリケーション開発でも、画像表示は非常に一般的な要件です。ユーザーエクスペリエンスを向上させるために、CSS を使用してクールな画像表示効果を実現できます。この記事では、読者がすぐに始められるように、一般的に使用されるいくつかのテクニックとメソッドを紹介し、対応するコード例を示します。 1. 画像ズームの特殊効果ズームマウスホバー効果画像上にマウスを置くと、ズーム効果によってインタラクティブ性が高まります。コード例は次のとおりです。

See all articles