小さな子供たちのためのCSSアニメーション。 アニメーションCSSの例と既製のコードアニメーションの種類css

私たちは最近それを見ました トランジションただの方法です アニメーションからのスタイルプロパティ オリジナル前 最終状態。

したがって、CSSの遷移は 明確なアニメーションの種類によって、ここで：

• 状態は2つだけです。開始と終了です。
• アニメーションはループしません。
• 中間状態は、時間の関数によってのみ制御されます。

しかし、必要に応じて：

• 制御する 中級州？
• ループするアニメーション？
• さまざまな種類のアニメーションを作成する 一アイテム？
• でのみ特定のプロパティをアニメーション化する 半分の道？
• 模倣する さまざまな時間関数さまざまなプロパティのために？

CSSのアニメーションでは、これらすべて、およびそれ以上のことが可能です。

アニメーションはミニムービーのようなもので、監督として、さまざまなシーン（キーフレーム）の俳優（HTML要素）に指示（スタイルルール）を与えます。

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

トランジションと同様に、アニメーションプロパティは 省略形他のいくつかのために：

• アニメーション名：アニメーションの名前。
• アニメーション期間：アニメーションの持続時間。
• アニメーション-タイミング-機能：中間状態の計算方法。
• アニメーション遅延：アニメーションはしばらくすると開始します。
• Animation-iteration-count：アニメーションを実行する回数。
• アニメーション方向：動きが反対方向に進むかどうか。
• Animation-fill-mode：アニメーションの開始前と終了後に適用されるスタイル。

簡単な例

ダウンロードボタンをアニメーション化するために、アニメーションを書くことができます バウンス:

@keyframes bouncing（0％（bottom：0; box-shadow：0 0 5px rgba（0,0,0,0.5）;）100％（bottom：50px; box-shadow：0 50px 50px rgba（0,0、 0,0.1）;））。loading-button（アニメーション：バウンス0.5sキュービックベジエ（0.1,0.25,0.1,1）0s無限交互両方;）

まず、@ keyframesを使用して実際のバウンドアニメーションを作成し、名前を付ける必要があります。

使った 省略形アニメーションプロパティとすべての可能なオプションが含まれています：

• アニメーション名：バウンス（キーフレームの名前と一致）
• アニメーション時間：0.5秒（0.5秒）
• アニメーション-タイミング-関数：キュービック-ベジェ（0.1,0.25,0.1,1）
• アニメーション-遅延：0秒（遅延なし）
• アニメーション-反復-カウント：無限（無限に再生可能）
• アニメーション方向：交互（前後に移動）
• アニメーション-塗りつぶしモード：両方

@keyframes

HTML要素をアニメーション化する前に、 キーフレームを使用してアニメーションを作成する..。 一般的に、キーフレームは全員です 中間ステップアニメーションで。 それらはパーセンテージを使用して決定されます：

• 0％-アニメーションの最初のステップ。
• 50％は、アニメーションの中間段階です。
• 100％が最後のステップです。

それぞれ0％と100％の代わりに、キーワードfromとtoを使用することもできます。

33％、4％、さらには29.86％など、必要な数のキーフレームを定義できます。 実際には、それらのいくつかだけを書きます。

各キーフレームは CSSルール、これは、通常どおりCSSプロパティを記述できることを意味します。

アニメーションを定義するには、@ keyframesキーワードを 題名:

@keyframes around（0％（左：0;上：0;）25％（左：240px;上：0;）50％（左：240px;上：140px;）75％（左：0;上：140px ;）100％（左：0;上：0;））p（アニメーション：約4秒線形無限;）

開始0％と終了100％に含まれていることに注意してください 同じルール CSS。 これにより、アニメーションが完全にループします。 反復カウンターが無限に設定されているため、アニメーションは0％から100％になり、すぐに 戻る永久に0％などになります。

アニメーション名

名前アニメーションは少なくとも使用されます 2回:

• で 書き込み@keframesを使用したアニメーション。
• で を使用して Animation-nameプロパティ（または省略形のanimationプロパティ）を使用したアニメーション。

@keyframeswhatever（/ * ... * /）.selector（animation-name：whatever;）

CSSクラス名と同様に、アニメーション名には次のもののみを含めることができます。

• 文字（a-z）;
• 数字（0-9）;
• アンダースコア（_）;
• ハイフン（-）。

名前を数字または2つのハイフンで始めることはできません。

アニメーション-期間

遷移期間と同様に、アニメーション期間は次のように設定できます。 秒（1秒）または ミリ秒（200ms）。

セレクター（アニメーション-持続時間：0.5秒;）

デフォルトは0です。これは、アニメーションがまったくないことを意味します。

アニメーション-タイミング-機能

トランジションのタイミング関数と同様に、アニメーションのタイミング関数は次のように使用できます。 キーワード線形、イーズアウトなど、または任意で定義できます ベジェ曲線.

セレクター（アニメーション-タイミング-機能：イーズインアウト;）

デフォルトはeaseです。

CSSアニメーションはキーフレームを使用するため、設定できます 線形時間の関数と シミュレートする定義することによる特定のベジェ曲線 多くの非常に具体的なキーフレーム。 最先端のアニメーションについては、Bounce.jsをご覧ください。

アニメーション-遅延

遷移遅延と同様に、アニメーション遅延は次のように設定できます。 秒（1秒）または ミリ秒（200ms）。

デフォルトは0です。これは、遅延がないことを意味します。

複数のアニメーションが含まれている場合に便利です シリーズ.

A、.b、.c（アニメーション：バウンス1秒;）。b（アニメーション遅延：0.25秒;）。c（アニメーション遅延：0.5秒;）

アニメーション-反復-カウント

デフォルトでは、アニメーションはのみ再生されます 一度（値1）。 次の3種類の値を設定できます。

• 2または3のような整数。
• アニメーションの半分しか再生されない0.5のような小数。
• アニメーションを無期限に繰り返す無限キーワード。

.selector（animation-iteration-count：infinite;）

アニメーション方向

アニメーション方向プロパティが決定します どのような順序でキーフレームが読み取られます。

• 通常：0％で開始し、100％で終了し、再び0％で開始します。
• 逆：100％で開始し、0％で終了し、再び100％で開始します。
• 代替：0％から始まり、100％に進み、0％に戻ります。
• 代替逆：100％から始まり、0％になり、100％に戻ります。

これは、アニメーションの反復回数が無限に設定されている場合に想像しやすくなります。

アニメーション-塗りつぶしモード

Animation-fill-modeプロパティは、何が起こるかを決定します フロントアニメーションの始まりと 後その完成。

を決定しながら 主要人員指定できます CSSルールこれは、アニメーションのさまざまなステップで適用されます。 これらのCSSルールでできるようになりました 衝突すると すでに適用されていますアニメーション要素に。

アニメーション-塗りつぶしモードでは、ブラウザに次のことを伝えることができます アニメーションスタイル また適用する必要があります アニメーションの外.

想像してみましょう ボタン、これは：

• 赤ディフォルト;
• になります 青アニメーションの開始時。
• そして最後に 緑アニメーションが完了したとき。

最終更新日：2016年6月11日

アニメーションは、要素のスタイルを変更する絶好の機会を提供します。 遷移時に、遷移が始まる前に要素が持っている初期値と、遷移が完了した後に設定される最終値を持つ一連のプロパティがあります。 一方、アニメーション中は、初期と最終の2つの値のセットだけでなく、多くの中間の値のセットも持つことができます。

アニメーションは、キーフレーム（キーフレーム）の順次変更に依存しています。 各キーフレームは、アニメーション化されたプロパティの値の1つのセットを定義します。 そして、そのようなキーフレームの連続的な変更は、実際にはアニメーションを表します。

実際、トランジションは同じモデルを使用します-2つのキーフレームも暗黙的に定義されます-開始と終了、そしてトランジション自体は開始から終了のキーフレームへのトランジションを表します。 この場合のアニメーションとの唯一の違いは、アニメーションに複数の中間キーフレームを定義できることです。

一般に、CSS3キーフレーム宣言は次の形式を取ります。

@keyframesanimation_name（から（/ *初期CSSプロパティ値* /）から（/ *最終CSSプロパティ値* /））

@keyframesキーワードの後に​​は、アニメーションの名前が続きます。 次に、少なくとも2つのキーフレームが中括弧で定義されます。 fromキーワードの後のブロックは開始キーフレームとして宣言され、ブロック内のtoキーワードの後、終了キーフレームが定義されます。 通常のスタイルが作成されるのと同じように、各キーフレーム内に1つ以上のCSSプロパティが定義されます。

たとえば、要素の背景色のアニメーションを定義しましょう。

この場合、アニメーションはbackgroundColorAnimationと呼ばれます。 アニメーションには任意の名前を付けることができます。

このアニメーションは、赤から青の背景への遷移を提供します。 アニメーションの終了後、div要素に定義されている色が設定されます。

アニメーションを要素にアタッチするには、そのanimation-nameプロパティをそのスタイルで適用します。 このプロパティの値は、適用するアニメーションの名前です。

また、animation-durationプロパティを使用して、アニメーション時間を秒またはミリ秒で設定する必要があります。 この場合、アニメーション時間は2秒です。

この定義では、ページが読み込まれた直後にアニメーションが開始されます。 ただし、ユーザーの操作に基づいてアニメーションをトリガーすることもできます。 たとえば、：hover疑似クラスのスタイルを定義することにより、マウスを要素の上に置いたときに開始するアニメーションを定義できます。

@keyframes backgroundColorAnimation（from（background-color：red;）to（background-color：blue;））div（width：100px; height：100px; margin：40px 30px; border：1px solid＃333; background-color：＃ ccc;）div：ホバー（アニメーション名：backgroundColorAnimation;アニメーション期間：2秒;）

多くのキーフレーム

上記のように、アニメーションでは、2つの標準キーフレームに加えて、多くの中間キーフレームを使用できます。 トゥイーンを定義するには、トゥイーンを使用する必要があるアニメーションのパーセンテージを適用します。

@keyframes backgroundColorAnimation（from（background-color：red;）25％（background-color：yellow;）50％（background-color：green;）75％（background-color：blue;）to（background-color：violet ;））

この場合、アニメーションは赤で始まります。 アニメーション時間の25％が経過すると、色が黄色に変わり、さらに25％が緑色に変わります。

1つのキーフレームで複数のプロパティを一度にアニメーション化することもできます。

@keyframes backgroundColorAnimation（from（background-color：red; opacity：0.2;）to（background-color：blue; opacity：0.9;））

複数の個別のアニメーションを定義することもできますが、それらを一緒に適用します。

@keyframes backgroundColorAnimation（from（background-color：red;）to（background-color：blue;））@ keyframes opacityAnimation（from（opacity：0.2;）to（opacity：0.9;））div（width：100px; height： 100px;マージン：40px 30px;ボーダー：1px実線＃333;背景色：#ccc;アニメーション名：backgroundColorAnimation、opacityAnimation;アニメーション-期間：2秒、3秒;）

アニメーションは、animation-nameプロパティの値としてコンマで区切られてリストされ、これらのアニメーションの時間も、animation-durationプロパティでコンマで区切られて設定されます。 アニメーションの名前とその時間は位置によって一致します。つまり、opacityAnimationアニメーションは3秒間続きます。

アニメーションの完成

通常、animation-durationプロパティで指定された時間間隔が終了すると、アニメーションも終了します。 ただし、追加のプロパティを使用すると、この動作をオーバーライドできます。

たとえば、animation-iteration-countプロパティは、アニメーションが繰り返される回数を決定します。 たとえば、3つのアニメーションが連続して繰り返されます。

アニメーション-反復-カウント：3;

アニメーションを無限に実行する場合、このプロパティには値infiniteが割り当てられます。

アニメーション-反復-カウント：無限;

繰り返すと、アニメーションは開始キーフレームから最初からやり直します。 しかし、animation-directionでは：alternate; 繰り返されるときのアニメーションの反対方向。 つまり、終了キーフレームで開始し、開始フレームに移行します。

アニメーション名：backgroundColorAnimation、opacityAnimation; アニメーション-期間：2秒、2秒; アニメーション-反復-カウント：3; アニメーション方向：代替;

アニメーションが終了すると、ブラウザはアニメーション要素のスタイルを、アニメーションが適用される前のスタイルに設定します。 ただし、animation-fill-mode：forwardsプロパティを使用すると、animatedプロパティの最終値を最後のフレームにあった値とまったく同じに設定できます。

アニメーション名：backgroundColorAnimation; アニメーション-期間：2秒; アニメーション-反復-カウント：3; アニメーション方向：代替; アニメーション-塗りつぶしモード：転送;

アニメーションの遅延

Animation-delayプロパティを使用して、アニメーションの遅延時間を定義できます。

アニメーション名：backgroundColorAnimation; アニメーション-期間：5秒; アニメーション-遅延：1秒; / * 1秒の遅延* /

アニメーションの滑らかさ機能

トランジションと同様に、すべて同じイージング機能をアニメーションに適用できます。

線形：線形平滑度関数、プロパティは時間とともに均等に変化します

イーズ：アニメーションを中央に向かって加速し、最後に向かって減速して、より自然な変化を提供するイーズ機能

イーズイン：開始時にのみ加速するイーズ機能

イーズアウト：開始時にのみ加速するイージング機能

イーズインアウト：アニメーションを中央に向かって加速し、最後に向かって減速して、より自然な変化を提供するイーズ機能

キュービックベジェ-アニメーションにキュービックベジェ関数を使用します

Animation-Timing-Functionプロパティは、滑らかさ関数を設定するために使用されます。

@keyframes backgroundColorAnimation（from（background-color：red;）to（background-color：blue;））div（width：100px; height：100px; margin：40px 30px; border：1px solid＃333; Animation-name：backgroundColorAnimation ;アニメーション-持続時間：3秒;アニメーション-タイミング-機能：イーズインアウト;）

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

アニメーションプロパティは、上記のプロパティを定義する簡単な方法です。

アニメーション：animation-nameanimation-durationanimation-timing-functionanimation-iteration-countanimation-directionanimation-delayanimation-fill-mode

アニメーションのタイトルとタイミングを提供する最初の2つのパラメーターは必須です。 残りの値はオプションです。

次の一連のプロパティを見てみましょう。

アニメーション名：backgroundColorAnimation; アニメーション-期間：5秒; アニメーション-タイミング-機能：イーズインアウト; アニメーション-反復-カウント：3; アニメーション方向：代替; アニメーション-遅延：1秒; アニメーション-塗りつぶしモード：転送;

このセットは、次のアニメーション定義と同等になります。

アニメーション：backgroundColorAnimation5sイーズインアウト3代替1sフォワード。

アニメーションでバナーを作成する

アニメーションの例として、簡単なアニメーションバナーを作成しましょう。

同時に進行中の3つのアニメーションがあります。 「バナー」アニメーションはバナーの背景色を変更し、text1およびtext2アニメーションは透明度設定を使用してテキストを表示および非表示にします。 最初のテキストが表示されている場合、2番目のテキストは表示されません。その逆も同様です。 したがって、バナー内のテキストのアニメーションを取得します。

CSS3アニメーションは広く使用されています。 最も初心者のウェブサイトビルダーでさえ、CSSアニメーションとは何か、そしてそれを作成する方法を理解する時が来ました。 CSS3アニメーションはブロックを動かすことであり、漫画のように見えると思われるかもしれません。 しかし、CSSアニメーションは、要素をあるポイントから別のポイントに移動するだけでなく、歪みやその他の変換も含みます。 初心者でもわかりやすくするために、すべてを段階的に説明しました。

1.CSS3アニメーションの基本的なプロパティ

どのCSS3プロパティがアニメーションの原因であるか、およびそれらが取ることができる値を理解するための小さな理論上のブロック。

• アニメーション名-アニメーションの一意の名前（キーフレーム、以下で説明します）。
• アニメーション-期間-アニメーションの継続時間（秒単位）。
• アニメーション-タイミング-機能-アニメーションの速度曲線。 一見、非常にわかりにくいです。 例を示す方が常に簡単です。以下にそれらを示します。 次の値を取ることができます。 使いやすさ| イーズイン| イーズアウト| キュービックベジェ（n、n、n、n）。
• アニメーション-遅延-アニメーションの開始前の秒単位の遅延。
• アニメーション-反復-カウント-アニメーションの繰り返し回数。 単純に数値で設定するか、無限に指定するとアニメーションが無期限に実行されます。

これが基本的なプロパティであり、最初のCSS3アニメーションを作成するのに十分すぎるほどです。

理論から知って理解する必要がある最後のことは、キーフレームを作成する方法です。 これも簡単に実行でき、キーフレームが指定されている@keyframesルールを使用して実行されます。 このルールの構文は次のとおりです。

上記では、最初と最後のフレームを設定しました。 すべての中間状態は自動的に計算されます！

2.CSS3アニメーションの実際の例

理論はいつものように退屈であり、常に明確であるとは限りません。 実際の例ですべてを確認する方がはるかに簡単です。テスト用のHTMLページで自分で確認することをお勧めします。

プログラミング言語を学ぶとき、彼らは通常「Hello、world！」というプログラムを書きます。 しかし、私たちはプログラミング言語ではなく、ドキュメントの外観を記述するための言語を研究しています。 したがって、独自の「Hello、world！」があります。

例として、次のようにします。ある種のブロックをしましょう