戦闘にフロントエンド開発の取得：CSSアニメーション@keyframes使用を

CSSアニメーション

CSSアニメーションアニメーションでは、JavaScriptやFlashを使用せずに、ほとんどのHTML要素を可能に！

アニメーションブラウザのサポート

IE10 +この属性をサポートしています。-ms-に続く他の低ブラウザのバージョン番号、-webkit - 、 - moz-またはプレフィックス-O-最初のバージョンを使用することを指定します。

CSSアニメーションとは何ですか？

アニメーションは、別のスタイルに一つのスタイルからの要素が徐々に変化できます。あなたは必要なCSSプロパティに従って必要な回数を変更することができます。CSSアニメーションを使用するには、最初のキーフレームアニメーションの数を指定する必要があります。特定の時間にスタイルを持つ要素を維持するためのキーフレーム。

ルールを@keyframes

あなたは@keyframesにCSSスタイルルールを指定すると、特定の時点でのアニメーションは徐々に新しいスタイルに現在のスタイルから変更されます。アニメーションを有効にするには、アニメーションが要素にバインドする必要があります。次の例は、「例」のアニメーションは、<div>要素にバインドされています。4秒間のアニメーション、そして、<div>要素は、「×××」に「赤」から変更されたのが徐々に背景色：

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 要将动画应用到的元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，交流学习，希望新手少走弯路

注意：アニメーション-durationプロパティは、アニメーションを完了するのに必要な時間を定義します。アニメーション-duration属性が指定されていない場合、デフォルト値は0（0秒）であるため、アニメーションは、発生しません。上記の例では、「から」キーワードを使用して（代表0％（開始）と100％（完全））「に」いつスタイルの変更を指定しています。また、割合を使用することができます。必要に応じて割合を使用することで、スタイル変更の任意の数を追加することができます。アニメーションが完了したときに25％、50％完了、100％完全なアニメーション、背景色の変化は、<div>要素の例を次

/* 动画代码 */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* 将动画应用到元素 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

次の例では、映画の中で25％の完了に背景色を再度50％および<div>要素の位置を変更し、アニメーションが完了したときに100％に再び変更されます。

/* 动画代码 */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* 将动画应用到元素 */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

##遅延アニメーション
アニメーション遅延属性は、アニメーションの遅延の始まりを指定します。次の例では、アニメーションを開始する前に2秒の遅延です。

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

また、それは否定できます。あなたが負の値を使用している場合はN秒が同じになっているとして、アニメーションの再生が始まります。次の例では、アニメーションは同じを開始するために2秒のようにプレーする必要があります。

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

アニメーションは、何度も実行する必要があります

アニメーション反復カウント属性は、アニメーションを実行する回数を指定します。次の例では、アニメーションを停止する前に3回実行されます。

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

次の例では、「無限」のアニメーションが永遠に行かせる値を使用しています。

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

あるいは逆循環運転待機アニメーション

アニメーション-directionプロパティは、後方または交互サイクル劇中で、アニメーションが前方であることを指定します。：アニメーション方向の属性は次の値があり
- （フォワード）アニメーション通常の再生ノーマル。これがデフォルトである
リバース-アニメーションが後方に果たしている（後方）
代替-アニメーションが後方に遊び、その後、最初の前進を果たした
代替リバース-最初のアニメーションを再生して、前方のアニメーションを再生
、次の例をに（逆になります後）のアニメーションを実行します。

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

次の例では、アニメーションが前方に最初に実行した後、後方に実行するために「代替」の値を使用しています。

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

次の例では、アニメーションは、最初に前方に実行し、バック実行「代替逆」の値を使用します。

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}
web前端开发学习Q-q-u-n： 767273102 ，分享开发工具，零基础，进阶视频教程，希望新手少走弯路 

アニメーションの速度プロファイルを指定します

アニメーションのタイミング機能プロパティは、アニメーションの速度プロファイルを指定します。アニメーションのタイミング機能の属性は次の値を有していてもよい：
EASEは-映画のスロースタートを指定し、かつ迅速に、そしてゆっくりと（これはデフォルトの設定です）終了
リニア-同じ速度で開始からアニメーションの最後に指定された
使いやすさで-スロースタートを指定します。アニメーション
やすアウト-アニメーションの遅い終わりを指定し
やすさ・イン・アウトを-遅くアニメーションを開始し、終了指定
（N、N、立方ベジエ曲線のn、n）は- あなたはの立方ベジェ関数内で独自に定義することができます価値
以下の実施例は、いくつかの異なる速度曲線を使用することができる示します。

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

アニメーションの塗りつぶしパターンを指定します。

最後の要素は、キーフレームには影響しません後、最初のキーフレームや遊びを再生する前に、CSSアニメーション。アニメーションフィルモードのプロパティが上書きされたアニメーションは、（最後の開始前に、あるいはその両方）を再生されていないことができ、この属性は、アニメーション・フィル・モードスタイルこの動作のターゲット要素を指定します。：アニメ・フィル・モード属性は以下の値持つことができ
NONEデフォルト値を。アニメーションを実行する前に、要素または後の任意のスタイルを適用しない
前方-スタイル要素は、（アニメーション方向及び反復-COUNT-アニメーションに応じて）最後のキーフレームの設定値が保持される
下位-取得の重要な要素を最初にすることによってフレーム形式（アニメーションの方向に応じて）設定値、およびアニメーション遅延中にこの値を保持し
、両方の-アニメーション方向アニメーションプロパティの両方に延び、前方および後方の規則に従う
次の例では、アニメーションの<div>要素を可能にしますスタイルの終わりに最後のキーフレームの値を保持します：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

次の例は、（アニメーション遅延の間）に配置された最初のキーフレームアニメーションの開始前に、スタイル値を取得するために、<div>要素できます。

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

次の例では、開始前に最初のキーフレームアニメーションが提供するスタイル値を取得するために、<div>要素でき、アニメーションフレームの終了時にキーパターンの最後の値を保持します。

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

短縮形のプロパティのアニメーション
の例以下は、6つのアニメーション属性を使用しています。

div {
  animation: example 5s linear 2s infinite alternate;
}

プログラム上の誰もが、ウェブのフロントエンドに興味を持って、業界の友人の深い理解に、計画を学ぶために勉強したい場合は、私たちは、フロントエンドの学習バックルqunを追加することができます：767273102人の友人を、あなたは私が歓迎している、学生であるか、切り替えたいかどうか、ではありませんHTML + CSS + JavaScriptを0基礎から始めて、定期的に乾燥し、ウェブ制作、ウェブサイトの開発、ウェブ開発のフルスタックを共有します。：jQueryの、アヤックス、ノード、プロジェクトHTML5モバイル戦闘終了時まで角速度フレーム[+ビデオツール+システム]は、道路地図、小さなパートナーと共有し終えている私たちは深刻で、フロントを学習します

CSSアニメーションのプロパティ
次の表に、すべてのCSSアニメーションは、ルールを@keyframesと属性：

プロパティ	説明
@keyframes	アニメーションコードを指定します。
アニメーション	すべての速記プロパティのアニメーションのプロパティを設定します。
アニメーションの遅延	アニメーションの開始遅延を指定します
アニメーションの方向	後方または交互に遊んで遊んで、アニメーションを指定して前方に再生されます
アニメーションの継続時間	それが取るどのくらいのサイクルを完了するためにアニメーションを指定します
アニメーションフィルモード	指定したスタイルの要素（アニメーションを開始する前に、または同時に再生終了後）、アニメーション再生されません
アニメーションの繰り返しカウント	アニメーションの数を指定します。
アニメーション名	アニメーションの名前を指定します@keyframes
アニメーションプレイ状態	アニメーションが実行中または一時停止して指定します
アニメーションのタイミング機能	アニメーションの速度プロファイルを指定します