CSSは、Webページをインタラクティブにするための最も強力な方法の1つです。それは私たちの基本的なルックアンドフィールを変えます ウェブページ。 CSSが提供する重要でエキサイティングな機能の1つは、アニメーションを実行できることです。これにより、ページ内の要素を移動できます。次の順序でCSSのアニメーションの旅を始めましょう。
CSSのアニメーション
当社のウェブサイトにアニメーションを追加することは、ユーザーの注意を引くための優れた方法です。それは私たちのページに価値を加えるだけでなく、ユーザーエクスペリエンスを豊かにします。 CSSのアニメーションは、2つの部分に基づいて構築されています。彼らです
- キーフレーム
- アニメーション
CSSアニメーションはすべてのブラウザでサポートされています。ただし、Safari（バージョン8.0まで）などの一部の古いブラウザーでは、アニメーションのプロパティを解釈するためにプレフィックス（-webkit-）が必要です。例えば：
.anim {高さ：200px幅：200px背景：水色の位置：相対的な境界線-半径：100％-webkit-animation-name：cssanim / *古いブラウザ* / -webkit-animation-duration：5s / *古いブラウザ* /アニメーション-名前：cssanimアニメーション-期間：5秒} / *古いブラウザ* / @ -webkit-keyframes cssanim {0％{左：0px} 100％{左：300px}} @keyframes cssanim {0％{左：0px} 100 ％{左：300px}}上記のサンプルhtmlページを使用して、スタイルタグのCSSコードを置き換えて、さらに例を試すことができます。
CSSのキーフレーム
これはCSSのアニメーションの構成要素です。これは、Webページ上のアニメーションの特定の瞬間とスタイルを定義するために使用されていました。つまり、CSS内で@keyframesを指定すると、現在の状態を新しい状態に変更したり、特定の期間オブジェクトをアニメーション化したりするためのコントロールを取得します。
@keyframesには、アニメーションの名前、ステージ、プロパティなど、アニメーションを制御するための特定のプロパティが必要です。
名前 –動作を説明するために、すべてのアニメーションに名前を付ける必要があります。
ステージ –ステージは、アニメーションの完了を表します。これは、「to」および「from」キーワードまたはパーセンテージで表すことができますが、0％はアニメーションの開始状態を表し、100％はアニメーションの終了状態を表します。パーセンテージ表現を使用する利点は、その間に複数の中間ステージを定義できることです。つまり、50％ステージまたは75％などでのアニメーションの動作を定義できます。
プロパティ –これらのプロパティを使用すると、@ keyframeを制御して、アニメーション中にそれらを操作できます。
.anim {高さ：200px幅：200px背景：水色の位置：相対的な境界線-半径：100％アニメーション-名前：cssanimアニメーション-期間：5s} @keyframes cssanim {0％{変換：scale（0.5）不透明度：0} 50 ％{変換：scale（1.5）不透明度：1} 100％{変換：scale（1）}}これで、キーフレームの定義について明確になりました。要素とオブジェクトをアニメーション化する方法を説明するために、アニメーションのプロパティを調べてみましょう。継承と初期の2つのプロパティは、すべてのアニメーションタイプで使用できます。これらのプロパティは通常、さまざまな動作を示すためにdivタグとともに使用されます。
初期： このプロパティをデフォルト値に設定します。
継承： 親要素からこのプロパティを継承します。
アニメーションのプロパティ
- アニメーション名
@keyframesで操作するために使用されるアニメーションの名前を指定します。可能な値は次のとおりです。
- 名前： これは、アニメーションのキーフレームにバインドする名前を指定します。
- 無し： これはデフォルト値であり、継承されたアニメーションまたはカスケードアニメーションをオーバーライドするために使用できます。
構文：
アニメーション名：名前|なし|イニシャル|継承
.anim {高さ：200px幅：200px背景：水色の位置：相対的な境界線-半径：100％アニメーション-名前：cssanimアニメーション-期間：5s} @keyframes cssanim {0％{左：0px} 100％{左：300px} }- アニメーション-期間
アニメーションが1回の実行を完了するのにかかる時間を指定します。秒またはミリ秒で定義されます（例：4秒または400ミリ秒）。このプロパティのデフォルト値は0であるため、このプロパティが指定されていない場合、アニメーションは実行されません。
構文：
アニメーション-期間：時間
.anim {高さ：200px幅：200px背景：青の位置：相対的な境界線-半径：100％アニメーション-名前：cssanimアニメーション-時間：4s} @keyframes cssanim {0％{変換：scale（0.4）不透明度：0} 50 ％{変換：scale（1.4）不透明度：1} 100％{変換：scale（1）}}- アニメーション-遅延
Animation-delayプロパティを使用すると、アニメーションの遅延を指定できます。アニメーションシーケンスがいつ実行を開始するかを定義します。
このプロパティの値は、秒（秒）またはミリ秒（ミリ秒）のいずれかで宣言できます。正の値と負の値の両方を保持できます。正の値は、指定された時間が経過した後にアニメーションが開始され、それまでアニメーション化されないままであることを示します。一方、負の値は、指定された時間枠ですでに実行されているかのように、そのポイントからすぐにアニメーションを開始します。
構文：
アニメーション-遅延：時間
.anim {高さ：200px幅：200px背景：水色の位置：相対的な境界線-半径：100％アニメーション-名前：cssanimアニメーション-期間：4sアニメーション-遅延：4s} @keyframes cssanim {0％{左：0px} 100％ {左：250px}}- アニメーション-反復-カウント
このプロパティは、アニメーションシーケンスを再生する必要がある回数を示します。このプロパティのデフォルト値は1です。可能な値は次のとおりです。
- 数 –は反復回数を示します
- 無限 –アニメーションが永遠に繰り返されることを示します
構文：
アニメーション-反復-カウント：数|無限
.anim {高さ：200px幅：200px背景：水色の位置：相対的な境界線-半径：100％アニメーション-名前：cssanimアニメーション-期間：2秒animation-反復-カウント：4} @keyframes cssanim {0％{左：0px} 100％{左：100px}}- アニメーション方向
アニメーションの方向を定義します。要素の方向は、順方向、逆方向、または交互のサイクルで再生するように設定できます。このプロパティのデフォルト値は通常であり、サイクルごとにリセットされます。可能な値は次のとおりです。
正常 –これはデフォルトの動作であり、アニメーションは順方向に再生されます。各サイクルの後、アニメーションは初期状態になり、再び前方に再生されます
逆行する –アニメーションは逆方向に再生されます。各サイクルの後、アニメーションは終了状態になり、逆方向に再生されます
代わりの –アニメーションの方向が逆になります。つまり、サイクルごとに最初に順方向に再生され、次に逆方向に再生されます。奇数サイクルごとに前方アニメーションがレンダリングされ、偶数サイクルごとに後方移動がレンダリングされます。
交互-逆 –アニメーションの方向が交互に逆になります。ここでは、アニメーションは最初に逆方向に再生され、次にすべてのサイクルで順方向に再生されます。奇数サイクルごとに逆方向または逆方向に移動し、偶数サイクルごとに順方向アニメーションをレンダリングします。
構文：
アニメーション方向：通常|リバース|代替|交互-逆
.anim {高さ：200px幅：200px背景：水色の位置：相対的な境界線-半径：100％アニメーション-名前：cssanimアニメーション-期間：2秒アニメーション-反復-カウント：無限} @keyframes cssanim {0％{左：0px} 100％{左：100px}}- アニメーションタイミング機能
このプロパティは、アニメーションの速度曲線または移動スタイルを決定します。あるフォームから別のフォームにスムーズにアニメーションスタイルを変更するために割り当てられています。値が割り当てられていない場合、デフォルトで緩和されます。アニメーションタイミング関数の可能な値は次のとおりです。
簡易 –これはプロパティのデフォルト値です。ここでは、アニメーションはゆっくりと始まり、途中で徐々に速くなり、その後再びゆっくりと終わります。
線形 –アニメーションは、サイクル全体、つまり開始から終了まで同じ速度を維持します。
イーズイン –アニメーションはゆっくり始まります。
イーズアウト –アニメーションはゆっくり終了します。
イーズインアウト –アニメーションは、開始時と終了時の両方でゆっくりと移動します。
ソルトスタックvsパペットvsシェフ
立方ベジェ（n、n、n、n） –この高度な機能を使用すると、独自の値を定義してカスタムタイミング関数を作成できます。可能な値の範囲は0から1です。
構文：
アニメーション-タイミング-関数：線形|使いやすさ|イーズアウト|イーズイン|イーズインアウト|立方ベジェ（n、n、n、n）
.anim {高さ：200px幅：200px背景：水色の位置：相対的な境界線-半径：100％アニメーション-名前：cssanimアニメーション-期間：2秒アニメーション-方向：逆} @keyframes cssanim {0％{背景：オレンジ色の左：0px } 50％{背景：黄色左：200px上：200px} 100％{背景：青左：100px}}- アニメーションフィルモード
これは、アニメーションの再生前または再生後のアニメーションスタイルを決定する特別なプロパティです。デフォルトでは、要素のスタイルは、開始前または終了後のアニメーションの影響を受けません。このプロパティは、アニメーションのこのデフォルトの動作をオーバーライドするのに役立つため、便利です。以下は、animation-fill-modeプロパティの可能な値です。
無し –これはプロパティのデフォルト値です。つまり、アニメーションの前または後に、アニメーションスタイルは要素に適用されません。
フォワード –スタイルは、最終的なアニメーションシーケンスの要素によって保持されます。つまり、アニメーションが終了した後です。
後方 –スタイルは、最初のアニメーションシーケンスの要素によって保持されます。つまり、特にアニメーションの遅延中にアニメーションが開始される前に保持されます。
どちらも –これは、アニメーションが順方向と逆方向の両方に続くことを意味します
構文：
アニメーション-塗りつぶしモード：なし|フォワード|後方|どちらも
.anim {幅：50px高さ：50px背景：水色：白フォント-太さ：太字の位置：相対アニメーション-名前：cssanimアニメーション-期間：5秒アニメーション-反復-カウント：無限の境界線-半径：100％}＃anim1 {アニメーションタイミング関数：ease}＃anim2 {animation-timing-function：linear}＃anim3 {animation-timing-function：ease-in}＃anim4 {animation-timing-function：ease-out}＃anim5 {animation-タイミング関数：ease-in-out} @keyframes cssanim {from {left：0px} to {left：400px}}- アニメーション-再生状態
このプロパティは、アニメーションを再生状態または一時停止状態にすることを指定します。また、アニメーションが一時停止から再開されると、アニメーションは終了したところから開始されます。可能な値は次のとおりです。
- 遊ぶ –実行中にアニメーションをレンダリングするには
- 一時停止 –アニメーションを一時停止状態でレンダリングします。
構文：
アニメーション-再生-状態：一時停止|遊ぶ
.anim {幅：100px高さ：100px背景：水色の位置：相対アニメーション-名前：cssanimアニメーション-期間：3sアニメーション-遅延：2sアニメーション-塗りつぶし-モード：後方border-radius：100％} @keyframes cssanim {0％ {トップ：0px背景色：オレンジ} 50％{トップ：0px背景色：緑} 100％{トップ：100px背景色：青}}- アニメーション
これは、アニメーションの省略形プロパティとして知られています。よりクリーンなコードに使用されます。すべてのアニメーションプロパティに慣れたら、アニメーションの省略形を使用して、コーディングを高速化し、すべてのプロパティを1行で定義することをお勧めします。
構文：
アニメーション：[アニメーション名] | [アニメーション-期間] | [アニメーション-タイミング機能] |[アニメーション遅延] | [アニメーション-反復-カウント] | [アニメーション方向] |[アニメーション-塗りつぶしモード] | [アニメーション-プレイ-状態]
さまざまなアニメーションプロパティを使用して上記で示したすべてのアニメーション効果は、省略形を使用して実現できます。アニメーション プロパティ。
.anim {高さ：200px幅：200px背景：水色の位置：相対的な境界線-半径：100％アニメーション-名前：cssanimアニメーション-期間：2秒アニメーション-方向：通常のアニメーション-再生状態：一時停止} @keyframes cssanim {0％ {背景：オレンジ色の上部：0px} 50％{背景：黄色の左：200px上部：200px} 100％{背景：青色の左側：100px}}これで、CSSで使用できるすべてのアニメーションプロパティが完了しました。より明確な画像を取得するには、これらのプロパティのさまざまなバリエーションを試す必要があります。快適になったら、アニメーションの省略形プロパティは、よりクリーンで高速なコードを作成するのに非常に役立ちます。これは、Web開発者がCSSで学ぶ重要なスキルの1つです。私たちは静的なオブジェクトよりも動くオブジェクトに焦点を合わせる傾向があるので、アニメーションはそれを達成するのに役立ち、また素晴らしい素晴らしいウェブページを開発するのに役立ちます。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
質問がありますか？ 「CSSのアニメーション」ブログのコメントセクションでそれについて言及してください。折り返しご連絡いたします。