CSSアニメーションの移行とアニメーション

参考記事：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

1.移行の基本的な使い方：


        ホバー{ 高さ：500pxなど。
      }ホバー{ 
        幅：500pxなど。
    </スタイル> 
  </ HEAD> 
  <BODY> 
    <IMG SRC = "./ o_200404110308weixin_20191025171935.jpg" ALT = "" /> 
  </ BODY> 
</ HTML>

　また、高さまたは幅プロパティの変更、などを指定することができます

      IMG { 
        幅は50px。
        高さ：は50px; 
        表示ブロック; 
        マージン：自動; 
        遷移：1S高さ; 
      }

　あなたは幅、高さの変化を変更したい場合は、あなたが遅延パラメータを指定することができ、1秒の唯一のimg height属性過度の期間という文言手段

      IMG { 
        幅は50px。
        高さ：は50px; 
        表示ブロック; 
        マージン：自動; 
        遷移：1S高さ、1S 1S幅。
      }

　　変更transitonのデフォルトの状態率は一様ではなく、徐々に遅く、簡単に呼ばれます

      IMG { 
        幅は50px。
        高さ：は50px; 
        表示ブロック; 
        マージン：自動; 
        遷移：1S高さ、1S 1S幅容易さ; 
      }

　　安心の値に加えて、追加のモードがあります

1.リニア：制服
2.easeイン：スローからファストまで
3.easeアウト：ファストからスローへ
4.cubic-ベジェ機能：カスタムスピードモード

　　立方ベジェツールのURLを使用することができます。https://cubic-bezier.com/#.17,.67,.83,.67をカスタマイズするには

IMG { 
    遷移：1S高立方ベジェ（0.83、0.97、.05,1.44）。
}

　　使用移行メモ：

　　　　1.現時点での主要なブラウザは既に接頭辞の移行をサポートし、それは使用することは非常に安全であることができます

　　　　2.すべてのCSS属性がサポートされるわけではありません推移

　　　　ブロックの背景になし：URL自動、それはアニメーション、似たような状況、ディスプレイがありません。明らかに、特定の値は、開始と終了の状態を知って、設定されている高さの開始または終了があれば3.移行の必要性（FOO、JPG）URLへ（bar.jpg）など

制限の変遷：

　　　　ページのロード時に、私は自動的に起動することはできませんので、1 transitonは、イベントをトリガーするために必要な

　　　　再度トリガしない限り2.transitionは、使い捨てである、自分自身を繰り返すことはできません

　　　　3.transition 2つのだけの状態

2.Animation

　　アニメーションのサイクル期間を指定するには、まず、CSSのAnmiationの必要性

      .donghua { 
        アニメーション：1S虹。
      }

　　テーブルデザイン上記のコードは、アニメーションを追加するには、このクラスを.donghua、我々は虹アニメーションアニメーション効果を定義する必要があります

      @keyframes虹{ 
        0％{ 
          背景：赤。
        } 
        50％{ 
          背景：オレンジ。
        } 
        100％{ 
          背景：黄緑色。
        }

　　トリガーアニメーション

    <DIV ID = "DIV1"> </ div> 
    <ボタンのonclick = "東華（）">点我</ボタン> 
    <スクリプト> 
      せDIV1 =のdocument.getElementById（ 'DIV1'）
      関数東華（）{ 
        div1.classList .add（ '東華'）
      } 
    </ SCRIPT>

　　デフォルトでは、アニメーションは一度だけ再生されます、無限のキーを追加すると、無制限のプレイ動画を可能に

      .donghua { 
        アニメーション：1S虹無限。
      }

　あなたはまた戻ってムービーを再生するための時間の特定の番号を指定することができます

      .donghua { 
        アニメーション：1S虹3。
      }

　　アニメーションの終了後、直ちに状態の終わりから初期状態に戻ってジャンプします。アニメーションを維持したい場合は状態の終了時に使用することができます

アニメーション・フィル・モードプロパティ。

      .donghua { 
        アニメーション：1S虹転送します。
      }

　　アニメーション・フィル・モードの他の値

1.なし：アニメーションの先頭にデフォルトバックは、状態なかったん
2.backwardsを：最初のフレームの状態にアニメーションバックを聞かせて
3.forwars：エンド状態を

　　アニメーションプレイ状態プロパティを使用して、アニメーションの最後を維持したい場合は時々、アニメーションの再生が突然、アニメーションのステータスの先頭に、デフォルトのジャンプバック、場所、停止します

      .donghua { 
        アニメーション：1S虹無限。
        アニメーションプレイ状態：一時停止; 
      } 
      .donghua：ホバー{ 
        アニメーション再生状態：実行; 
      }