


CSSアニメーションを制御するために使用できるさまざまなプロパティ(例えば、アニメーション名、アニメーションデュレーション、アニメーション - タイミング機能、アニメーションアイテーションカウント、アニメーション対応、アニメーションフィルモードなど)を説明します。
CSSアニメーションは、さまざまなプロパティを通じて制御され、それぞれがアニメーションの異なる側面を定義します。これらのプロパティの詳細な説明は次のとおりです。
- Animation-Name :このプロパティは、アニメーションの動作を定義する
@keyframes
AT-Ruleの名前を指定します。たとえば、animation-name: fadeIn;
@keyframes fadeIn { ... }
で定義されたアニメーションを使用します。 -
アニメーション期間:これにより、アニメーションが1つのサイクルを完了するためにかかる時間の長さを設定します。数秒またはミリ秒(MS)で指定できます。たとえば、
animation-duration: 3s;
アニメーションが3秒間持続することを意味します。 -
アニメーション - タイミング機能:このプロパティは、その期間の1つのサイクルにわたってアニメーションがどのように進行するかを定義します。一般的な値には、
ease
、linear
、ease-in
、ease-out
、ease-in-out
含まれます。さらに、Cubic-Bezier関数を使用して、カスタムタイミング関数を定義できます。 - Animation-Iteration-Count :これは、アニメーションを再生する回数を指定します。
animation-iteration-count: 3;
、またはinfinite
にアニメーションを無期限にループするように設定します。 -
アニメーション方向:このプロパティは、アニメーションが一部またはすべてのサイクルで逆に再生されるかどうかを決定します。値には、
normal
、reverse
、alternate
、alternate-reverse
が含まれます。 - Animation-Fill-Mode :これにより、アニメーションが実行される前後にターゲット要素に適用される値が制御されます。考えられる値は、
none
、forwards
、backwards
、およびboth
です。forwards
最後のキーフレーム値を保持し、backwards
はアニメーションが開始される前に最初のキーフレーム値を適用します。
これらのプロパティは、複雑なアニメーションを実現するために個別にまたは一緒に使用できます。
アニメーション - タイミング機能を使用して、CSSアニメーションのタイミングと速度を設定するにはどうすればよいですか?
CSSのanimation-timing-function
プロパティを使用すると、アニメーションのタイミングと速度をその期間にわたって制御できます。このプロパティは、アニメーションの加速曲線を定義し、それが速く始まる速さ、進行方法、そしてそれがどのように終わるかに影響します。 animation-timing-function
のいくつかの一般的な値は次のとおりです。
-
ease
:これはデフォルト値です。アニメーションはゆっくりと始まり、中央から加速し、最後に向かって遅くなります。これは、立方体ビジエ関数cubic-bezier(0.25, 0.1, 0.25, 1)
で表されます。 -
linear
:アニメーションは、最初から最後まで一定の速度で移動します。これはcubic-bezier(0, 0, 1, 1)
で表されます。 -
ease-in
:アニメーションはゆっくりと始まり、進行するにつれてスピードアップします。cubic-bezier(0.42, 0, 1, 1)
で表されます。 -
ease-out
:アニメーションは迅速に始まり、最後に向かって遅くなります。cubic-bezier(0, 0, 0.58, 1)
で表されます。 -
ease-in-out
:アニメーションはゆっくりと始まり、中央から加速し、最後に向かって再び遅くなります。cubic-bezier(0.42, 0, 0.58, 1)
で表されます。
さらに、4つの数値をパラメーターとして撮影するcubic-bezier
関数を使用してカスタムタイミング関数を作成できます。それぞれがアニメーションの曲線を定義するグラフ上のポイントを表します。たとえば、 animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
カスタムカーブを作成します。
これらのタイミング関数を使用して、アニメーションの速度とタイミングを微調整して、望ましい視覚効果を実現できます。
CSSアニメーションでアニメーション方向に異なる値を使用することの効果は何ですか?
CSSのanimation-direction
プロパティは、特に繰り返されるように設定されている場合、アニメーションが再生される方向を制御します。異なる値がアニメーションにどのように影響するかは次のとおりです。
-
normal
:これはデフォルト値です。アニメーションは、各サイクルの最初から最後まで前進します。アニメーションが複数回繰り返されると、各サイクルが前方に再生されます。 -
reverse
:アニメーションは逆に再生され、終了状態から始まり、開始状態に戻ります。各サイクルは後方に再生されます。 -
alternate
:アニメーションは前方と逆の間に交互になります。偶数のサイクル(2、4、6など)では、前方に再生され、奇数サイクル(1、3、5など)では、逆に再生されます。これにより、前後の効果が生まれます。 -
alternate-reverse
:alternate
に似ていますが、アニメーションは逆に始まります。したがって、奇数のサイクル(1、3、5など)では、逆に再生され、偶然のサイクル(2、4、6など)では、前方に再生されます。
animation-direction
にこれらの異なる値を使用すると、シンプルなループアニメーションからより複雑な振動アニメーションまで、さまざまな視覚効果を作成できます。たとえば、振り子のアニメーションはalternate
使用して前後にスイングする場合がありますが、バウンスボールアニメーションはalternate-reverse
を使用して現実的なバウンス効果を作成する場合があります。
アニメーションフィルモードが実行前後のCSSアニメーションの動作にどのように影響するかを説明できますか?
animation-fill-mode
プロパティは、アニメーションが実行される前後に要素に適用されるスタイルを決定します。ここに異なる値とその効果があります:
-
none
:これはデフォルトです。アニメーションは、要素が開始する前または終了後に要素に影響を与えません。要素は、アニメーションが終了した直後に元の状態に戻ります。 -
forwards
:アニメーションが終了した後、要素はアニメーションの最後のキーフレームによって定義された状態に残ります。これは、要素が消えた後に目に見えるようにするなど、アニメーションの終了状態を維持するのに役立ちます。 -
backwards
:アニメーションが始まる前に、要素はアニメーションの最初のキーフレームによって定義された状態に設定されます。これは、実際に開始する前にアニメーションの要素を準備するために使用できます。たとえば、消滅する前に要素を隠すように設定するなどです。 -
both
:これは、forwards
とbackwards
の効果を組み合わせます。この要素は、アニメーションが開始される前に最初のキーフレームによって定義されたスタイルを使用し、アニメーションが終了した後に最後のキーフレームのスタイルを保持します。
animation-fill-mode
を使用することにより、アニメーションの前、最中、後に要素の外観と動作を制御できます。これは、ユーザーインターフェイスアニメーションの継続性を維持したり、要素の異なる状態間でシームレスな遷移を作成するために重要です。
以上がCSSアニメーションを制御するために使用できるさまざまなプロパティ(例:アニメーション名、アニメーションデュレーション、アニメーション - タイミング機能、アニメーションアイテーションカウント、アニメーションダレクション、アニマットを説明することができますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理:Focus-Visible」をご覧ください。で

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています(注:使用できなくなりました)。 フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか?新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

NPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

Dreamweaver Mac版
ビジュアル Web 開発ツール

ホットトピック



