CSSアニメーション方向プロパティとは: あなたが知る必要があるすべて
公開: 2022-08-14CSS がアニメーションを作成するためだけに使用されているのは何だと思いますか? 確かにそうですが、それに加えて、CSS を使用して速度、持続時間、方向、開始時間などを制御することもできます。
アニメーションを上向きにするか下向きにするかに関係なく、Web 開発における CSS の animation-direction プロパティを使用すると、目的を達成できます。
これは初めてですか？ 心配する必要はありません！ このブログでは、CSS アニメーション プロパティについて詳しく説明します。
それでは、これ以上苦労することなく、CSS アニメーションとその使用法について理解しましょう。
CSSのアニメーション方向プロパティとは?
CSS アニメーション方向プロパティは、アニメーションの方向に関するすべてです。 このプロパティを設定すると、アニメーション サイクルを後方、前方、または別の方向に簡単に設定できます。
それでは、さまざまなアニメーションの方向性を見てみましょう。
- アニメーション方向: 通常;
- アニメーションの方向: 逆;
- アニメーション方向: 交互反転;
- アニメーション方向: 代替;
さらに役立つように、アニメーション方向プロパティの構文を共有しました。 この構文が、プロのようなアニメーションを作成するのに役立つことを願っています。
/* CSS アニメーション プロパティのシングル アニメーション */
- アニメーション方向: 通常;
- アニメーションの方向: 逆;
- アニメーション方向: 代替;
- アニメーション方向: 交互反転;
/* CSS animation プロパティの Multiple animations */
- アニメーションの方向: 通常、逆;
- アニメーションの方向: 交互、逆、通常;
/* CSS アニメーション プロパティのグローバル値 */
- アニメーション方向: 継承;
- アニメーション方向: 初期;
- アニメーションの方向: 元に戻す;
- アニメーションの方向: 未設定;
さまざまな CSS アニメーション プロパティを理解したので、今度は CSS アニメーション プロパティの値を理解します。
CSS アニメーション プロパティの値
普通
このプロパティを使用すると、アニメーションは順方向に再生されます。 これは、アニメーション サイクルごとに、アニメーションが最初の状態にリセットされ、再び開始されることを意味します。
値 - "Normal" は、基本的に CSS の animation-direction プロパティのデフォルト値です。 したがって、このプロパティを設定しない場合、デフォルトで順方向に再生されます。
逆行する
逆アニメーションとは、サイクルごとに逆方向に実行されるアニメーションのことです。 このスタイルでは、アニメーションのステップとタイミング関数が逆方向に実行されます。
たとえば、イーズイン タイミング関数はイーズアウトになります。
代わりの
代替アニメーションは、サイクルごとに方向を反転し、最初の繰り返しは順方向です。 カウントは、サイクルが 1 から始まる奇数か偶数かを判断するためのものです。
交互反転
オルタネートリバースは、各サイクルの方向を逆にし、最初の反復を逆方向に再生します。 カウントは、サイクルが偶数か奇数かを判断するためのもので、1 から始まります。
アニメーション ディレクションの CSS 短縮形
アニメーションのショートハンド CSS プロパティを使用して、アニメーションの方向を含むさまざまなアニメーション プロパティを設定できることを知って驚かれることでしょう。
CSS アニメーション ショートハンド プロパティは、スタイル間にアニメーションを適用します。 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play- などのすべてのアニメーション プロパティを設定する簡単な方法です。州。
一般的な CSS アニメーションの問題
アニメーションが意図したとおりに機能しない、またはまったく機能しない場合、問題の理由とその解決方法を次に示します。
@keyframes ルールなし
CSS アニメーションでは、@keyframes ルールがアニメーションの外観を定義します。 より具体的には、どの要素スタイルがいつ変更されるかを定義します。 このルールがないと、要素に使用するアニメーションがありません。 そのため、次回は @keyframes ルールが存在するかどうか、およびその名前がターゲット要素のアニメーション名と一致するかどうかを確認してください。
アニメーションの長さが設定されていません
要素にキーフレーム ルールを割り当てたが、アニメーションの長さを設定していない場合、まだ再生されていないように見えるとします。 デフォルトでは、CSS アニメーション サイクルの長さは 0 秒です。
このサイクルをオーバーライドするには、アニメーション名と同じブロックと同じように、対象の要素に秒の値を持つ animation-duration ルールを組み込む必要があります。
アニメーションの開始が早すぎる
より高い消費者体験のために、アニメーションの開始前に短い延期を特徴とする必要がある場合があります。 アニメ延期の持ち物でこれを達成してください。
アニメーション化できない CSS プロパティ
アニメーションが機能しないもう 1 つの理由は、アニメーション化できない CSS プロパティをアニメーション化しようとしている可能性があります。
CSS アニメーションはサポートされていません
現在の最大のモバイルおよびコンピューター ブラウザーでの CSS アニメーションの描画。 ただし、ブラウザのサポートが失われているため、古いブラウザや何年も更新されていないブラウザのモデルを使用している場合、アニメーションは機能しません。
ブラウザを更新しても問題が発生する場合は、オーセンティック ポリシーにさらにサプライヤ プレフィックスを付けたアニメーション ポリシーを含めて、アニメーションを再試行してください。
CSS ショートハンドの書き方が間違っている
CSS ショートハンドは、よりクリーンな CSS を書き留め、ファイル内のコード量を減らす優れた方法です。 アニメーションの所有物は、これらの CSS ハウスの省略形です。
- アニメ時代
- アニメーションコール
- アニメ延期
- アニメーションディレクション
- アニメーションフィルモード
- アニメーション反復依存
- アニメーションプレイネーション
- アニメーションタイミング機能
アニメーション期間用とアニメーション呼び出し用の 2 つの値が必要です。 それらに加えて、値の順序によって、どのアニメーションの持ち物にどの価格が割り当てられるかが決まります。
値がずれていると、アニメーションが予想とは異なる動作をするはずです。 したがって、アニメーションの略記の使用法が属する場合は、その値が適切な順序でインデックス付けされていることを確認してください。
遅いパフォーマンス
CSS アニメーションは、さまざまな種類のインターネット アニメーションよりも全体的なパフォーマンスが高くなる傾向があります。 ただし、現在ではすべての CSS アニメーションが同じというわけではなく、いくつかの活発なパターンは、他のパターンよりも全体的なパフォーマンスを徐々に低下させます。
最も簡単な CSS アニメーションは、Web ページの読み込み時間に大きな影響を与えません。 ただし、アニメーションでアップロードする結果が大きいほど、全体的なパフォーマンスの問題が発生する可能性が高くなります。
全体的なパフォーマンスが低下しないように、再描画の原因となるアニメーションの使用を制限することをお勧めします。 ペイントとは、インターネット Web ページ ピクセルの目に見えるショーを画面上で使用して作成するブラウザのことです。 ペイントは非常に大量の処理能力を使用するため、アニメーションのためにさまざまな再ペイントをできるだけ制限する必要があります。
残念ながら、アニメーション化可能な CSS ハウスを最大にすると、変更中に再描画が発生します。 この変換 (スケール、回転、位置など) と不透明度の例外は、全体的なパフォーマンスへの影響が最小限である可能性があります。 これは、活気のあるときに再描画を引き起こす CSS ハウスのリファレンスです。
それでも、アニメーションを完全に破棄することを思いとどまらせてはいけません。 ペースの問題がある場合、それはおそらく、すぐに多くのことを実行しようとしているか、少なくとも 1 つの大規模な詳細または要素の編成にアニメーションを使用していることが原因です。
Web サイトでは、CSS アニメーションは一流ですが、エクスペリエンスを美しくするために微妙に使用されているため、複雑なアニメーションで訪問者と対話する必要があるかどうかを思い出してください。
最終決定
はい。HubSpot では、適切な CSS コードを使用してアニメーションの方向を制御できます。 良い！ CSS アニメーションの方向プロパティは、多くの人が気付いていないことに完全に同意します。
しかし、はい、このブログを読んだ後は、アニメーションを制御し、Web サイトのデザインに魅力的でユーザー フレンドリーな外観を与える方法に精通していることでしょう。 何を求めている？ ターゲット ユーザーにアピールするデザインを作成する準備をしましょう。
サイトのデザインについてまだサポートが必要な場合は、お気軽にお問い合わせください。 私たちの専門家が同じことをお手伝いします。
編集者：ディビア