CSS
アニメーション

構文

• transition: <property> <duration> <timing-function> <delay>;
• @keyframes <identifier>
• [ [ from | to | <percentage> ] [, from | to | <percentage> ]* block ]*

パラメーター

遷移プロパティを持つアニメーション

シンプルなアニメーションに便利なCSS transitionプロパティでは、数値ベースのCSSプロパティをステート間でアニメーション化できます。

例

.Example{
    height: 100px;
    background: #fff;
}

.Example:hover{
    height: 120px;
    background: #ff0000;
}

結果を見る

デフォルトでは、 .Exampleクラスを持つ要素に.Exampleと、要素の高さはすぐに120pxに、背景色は赤色に（ #ff0000 ）ジャンプします。

transitionプロパティを追加することで、これらの変更が時間の経過とともに発生する可能性があります。

.Example{
    ...
    transition: all 400ms ease;
}

結果を見る

all値は、すべての互換性のある（数値ベースの）プロパティに遷移します。任意の互換性のあるプロパティ名（例えば、 height又はtop ）このキーワードに置換することができます。

400msは、移行に要する時間を指定します。この場合、要素の高さの変更には400ミリ秒かかります。

最後に、値easeは、アニメーションの再生方法を決定するアニメーション関数です。 easeすることは、ゆっくりと始動し、スピードアップし、再びゆっくりと終了することを意味する他の値はlinear 、 ease-out 、およびease-in 。

ブラウザ間の互換性

transitionプロパティは一般に、IE 9を除く主要なブラウザすべてでサポートされています。FirefoxおよびWebkitベースのブラウザの以前のバージョンでは、次のようなベンダープレフィックスを使用します。

.Example{
    transition:         all 400ms ease;
    -moz-transition:    all 400ms ease;
    -webkit-transition: all 400ms ease;
}

注： transitionプロパティは、単位にかかわらず、任意の2つの数値間の変更をアニメートできます。また、 100pxから50vhような単位間の遷移も可能50vh 。ただし、エレメントの高さを100pxからautoするなど、数値とデフォルト値または自動値の間で遷移することはできません。

`will-change`属性を使ったアニメーションのパフォーマンスの向上

アニメーションやその他のGPU重いアクションを作成するときは、 will-change属性を理解するwill-change重要です。

CSSキーフレームとtransitionプロパティの両方がGPUアクセラレーションを使用します。計算をデバイスのGPUにオフロードすることで、パフォーマンスが向上します。これは、計算されるGPUにオフロードされるペイントレイヤー（個別にレンダリングされるページの一部）を作成することによって行われます。 will-changeプロパティは、ブラウザにアニメートするものを通知し、ブラウザが小さなペイント領域を作成してパフォーマンスを向上させるようにします。

will-changeプロパティは、アニメートされるプロパティのカンマ区切りリストを受け入れます。たとえば、オブジェクトを変換して不透明度を変更する場合は、次のように指定します。

.Example{
    ...
    will-change: transform, opacity;
}

注意： will-change控えめにwill-changeください。ブラウザ上で各要素のペイントレイヤーを作成しようとすると、GPUによる処理量が大幅に増加する可能性があるため、ページ上の各要素の設定will-changeするとパフォーマンスの問題が発生する可能性があります。

キーフレーム付きアニメーション

マルチステージCSSアニメーションでは、CSS @keyframesを作成できます。キーフレームでは、より複雑なアニメーションを定義するために、キーフレームと呼ばれる複数のアニメーションポイントを定義できます。

基本的な例

この例では、すべての色を循環させる基本的な背景アニメーションを作成します。

@keyframes rainbow-background {
         0%     { background-color: #ff0000; }
     8.333%     { background-color: #ff8000; }
    16.667%     { background-color: #ffff00; }
    25.000%     { background-color: #80ff00; }
    33.333%     { background-color: #00ff00; }
    41.667%     { background-color: #00ff80; }
    50.000%     { background-color: #00ffff; }
    58.333%     { background-color: #0080ff; }
    66.667%     { background-color: #0000ff; }
    75.000%     { background-color: #8000ff; }
    83.333%     { background-color: #ff00ff; }
    91.667%     { background-color: #ff0080; }
    100.00%     { background-color: #ff0000; }
}

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

結果を見る

ここで注意すべき点がいくつかあります。まず、実際の@keyframes構文。

@keyframes rainbow-background{

これにより、アニメーションの名前がrainbow-backgroundます。

0%     { background-color: #ff0000; }

これは、アニメーション内のキーフレームの定義です。最初の部分は、ケースの0%で、アニメーション中のキーフレームの位置を定義します。 0％は、最初からアニメーションの総時間の0%意味します。

アニメーションはキーフレーム間で自動的に切り替わります。そのため、次の背景色を8.333%に設定すると、アニメーションはそのキーフレーム間を移行する時間の8.333％をスムーズに占めます。

.RainbowBackground {
    animation: rainbow-background 5s infinite;
}

このコードは、 .RainbowBackgroundクラスを持つすべての要素にアニメーションを添付します。

実際のアニメーションプロパティには、次の引数があります。

• animation-name ：私たちのアニメーションの名前。この場合、 rainbow-background
• animation-duration ： アニメーションの所要時間 （この場合は5秒）。
• animation-iteration-count（オプション） ：アニメーションがループする回数。この場合、アニメーションは無期限に続きます。デフォルトでは、アニメーションは1回再生されます。
• animation-delay（オプション） ：アニメーションを開始するまでの待機時間を指定します。デフォルトは0秒で、負の値をとることができます。例えば、 -2sそのループにアニメーション2秒を開始します。
• animation-timing-function（オプション） ：アニメーションの速度カーブを指定します。これがデフォルトease 、アニメーションは、遅い始まり速く取得し、遅い終了。

この特定の例では、 0%と100%両方のキーフレームで{ background-color: #ff0000; } 。 2つ以上のキーフレームが状態を共有する場合は、1つのステートメントで指定することができます。この場合、2つの0%と100%行をこの1行で置き換えることができます：

0%, 100%     { background-color: #ff0000; }

クロスブラウザとの互換性

古いWebKitベースのブラウザでは、次のように@keyframes宣言とanimationプロパティの両方にベンダープレフィックスを使用する必要があります。

@-webkit-keyframes{}

-webkit-animation: ...

構文例

最初の構文例は、使用可能なすべてのプロパティ/パラメータを使用したアニメーションの短縮形プロパティを示しています。

  animation: 3s         ease-in           1s      2                 reverse     both        paused       slidein;
  /*         duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name   */

私たちの2番目の例は少しシンプルで、いくつかのプロパティを省略できることを示しています：

  animation: 3s         linear            1s      slidein;
  /*         duration | timing-function | delay | name   */

3番目の例は、最小の宣言を示しています。 animation-nameとanimation-durationを宣言する必要があることに注意してください。

  animation: 3s         slidein;
  /*         duration | name */

また、アニメーションを使用するときは、プロパティの順序が違いを生むことにも言及する価値があります。明らかに、ブラウザはあなたの時間をあなたの遅れと混同するかもしれません。

簡潔さがあなたのものでない場合は、省略表現のプロパティをスキップして、各プロパティを個別に書き出すこともできます。

animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: reverse;
animation-fill-mode: both;
animation-play-state: paused;
animation-name: slidein;