CSSキーフレームアニメーションを作成する方法

CSSキーフレームアニメーションを作成する方法

CSSを使用すると、開発者はキーフレームアニメーションを使用してWebページに命を吹き込むことができます。





CSSアニメーションは、さまざまなプロパティを使用してHTML要素の初期状態を変更することで実現されます。アニメーション化できる一般的なCSSプロパティには次のものがあります。



スタートメニューアイコンウィンドウの変更10
  • 幅
  • 身長
  • ポジション
  • 色
  • 不透明度

これらの一般的なCSSプロパティは、特定のCSS要素によって操作され、目的の結果を作成します。 Webページでアニメーション化された要素に出くわしたことがある場合は、その要素がキーフレームアニメーションを使用してアニメーション化されている可能性があります。





キーフレーム要素とは何ですか？

NS キーフレーム要素 アクセスできる1つ以上のHTML要素で使用できます。これは、要素の状態の特定のポイントを識別し、この要素が現時点で持つ必要のある外観を指示します。

これは消化するのが大変なように聞こえるかもしれませんが、実際には非常に簡単です。 NS キーフレーム要素 非常に単純な構造で、アニメーションの要件に合わせて簡単に理解および調整できます。



キーフレーム構造の例


@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}

緑の長方形のボタンを青い丸いボタンに変えてアニメーション化するとします。

のパラメータ内 から 上記のセクションでは、要素を緑色の長方形のボタンのように見せるために必要なすべてのスタイリングを配置する必要があります。 に セクションでは、このボタンを青い丸いボタンに変換するためのすべてのスタイリング要件を配置します。



あなたが考えているなら、それはアニメーションのようにはあまり聞こえません。これは、このプロセス全体の主要なコンポーネントがまだ導入されていないためです---このコンポーネントはアニメーションプロパティです。

アニメーションプロパティ

NS アニメーションプロパティ さまざまなサブプロパティのセットがあります。これらは、上記のキーフレーム構造と組み合わせて使用​​され、目的のHTML要素をアニメーション化します。



ただし、プロジェクトでアニメーションを実現するには、これらのサブプロパティのうち5つと、それらに関連付けられている値を知っているだけで済みます。これらのプロパティは次のように知られています。

  • アニメーション名
  • アニメーション-期間
  • アニメーションタイミング機能
  • アニメーション-遅延
  • アニメーション-反復-カウント

Webページでのアニメーションの使用

上記のシナリオを使用して、目標はアニメーションボタンを作成することです。

ボタンアニメーションの例







Animation

/* styling the button */
.btn{
color:white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation-name: clickButton;
animation-duration: 5s;
animation-delay: 4s;
animation-iteration-count:infinite;
animation-timing-function: ease-in-out;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}




Click!


上記のコードのアニメーションセクションには、前述の5つのサブプロパティが含まれています。各プロパティには非常に異なる機能があり、それらが一緒になって、ターゲットに設定されたHTML要素をアニメーション化します。

関連：CSSセレクターを使用してWebページの一部をターゲットにする方法

Animation-nameプロパティ

このプロパティは、リストで最も重要なプロパティの1つです。なしで アニメーション名プロパティ 、に貼り付ける識別子がありません キーフレーム要素 、パラメータ内のすべてのコードを役に立たなくします。

他のサブプロパティの1つまたは2つを含めるのを忘れた場合でも、かなり適切なアニメーションが表示される可能性があります。ただし、忘れた場合 アニメーション名プロパティ アニメーションはありません。

Animation-durationプロパティ

このプロパティは、ある状態から次の状態に遷移するときにアニメーション要素がかかる時間を定義するために使用されます。

上記の例では、 アニメーション期間プロパティ は5秒（5秒）に設定されているため、緑色の長方形のボタンは、完全に青色の丸いボタンになるまでに合計5秒かかります。

Animation-delayプロパティ

このプロパティは、1つの理由から重要です。一部のWebページは、完全に読み込まれるまでに数秒かかる場合があります（いくつかの異なる要因のため）。だから アニメーション遅延プロパティ Webページの読み込みに時間がかかる場合に備えて、アニメーションがすぐに開始されないようにします。

上記の例では、 アニメーション遅延プロパティ は4sに設定されています。これは、ウェブページにアクセスしてから4秒後までアニメーションが開始されないことを意味します（アニメーションが開始される前にウェブページを読み込むのに十分な時間を与えます）。

Animation-iteration-countプロパティ

このプロパティは、アニメーション化された要素が1つの状態から次の状態に遷移する回数を示します。 NS アニメーション-反復-カウントプロパティ 単語と数字である値を取ります。数値は1以上の任意の値にすることができますが、単語の値は通常 無限 。

上記の例では、 アニメーション-反復-カウント値 に設定されています 無限 、これは、Webページがアップしている限り、buttonプロパティが1つの状態から次の状態に継続的にアニメーション化されることを意味します。

Animation-timing-functionプロパティ

このプロパティは、ある状態から次の状態に遷移するときのアニメーション要素の動きを指示します。 NS アニメーション-タイミング-関数プロパティ 通常、3つのイーズ値のいずれかが割り当てられます。

  • イーズイン
  • イーズアウト
  • イーズインアウト

NS イーズインアウト値 上記で使用されています。これにより、アニメーションが1つの状態から別の状態にゆっくりと移行します。ボタンが緑色の長方形から青色の円に変化するときにゆっくりとした遷移​​を作成することが目標である場合は、 イーズインバリュー 。反対方向へのゆっくりとした移行のみが必要な場合は、 イーズアウト値 。

コードの削減

ほとんどの場合、プログラムの長さを短くすることは実用的なアプローチと見なされます。これは主に、コード行が少ないため、プログラムでエラーが見過ごされる可能性が低くなるためです。

上記のコードは4行減らすことができます。これは、各サブプロパティを明示的に識別せずに、アニメーションプロパティを使用するだけで実現できます。

ボタンアニメーションの例のコードを減らす







Animation

/* styling the button */
.btn{
color: white;
border: none;
font-size: 20px;
width: 100px;
height: 40px;
padding: 10px 20px;
/* animating the button */
animation: clickButton 5s ease-in-out 4s infinite;
}
/* styling the button states in the animation */
@keyframes clickButton {
from{
background-color: springgreen;
}
to{
border-radius: 30px;
background: blue;
}
}