cssアニメーション効果:transitionとanimate

transitionとanimateはいずれもいくつかのアニメーション効果を実現することができ、異なる点はtransitionがインタラクションを借りる必要があり、アニメーションが完成した後、元のアニメーション効果に従って復元することである.アニメーションでは、キーフレームの中間状態、制御の一時停止、再生をカスタマイズできます.終了後、デフォルトの瞬間復元
一.transform(インタラクティブにトリガーする必要があります):移動(translate)、回転(rotate)、スケール(scale)、スキュー(skew)などの効果使用:transform属性は要素自体に使用され、translateなどの具体的な属性はhoverなどの擬似クラスグローバル設定属性に使用されます:transform-origin:参照原点を変更します.デフォルトは中心で、left、right、center、
1.translateリニア移動translate:transform:translate(50 px,30 px);//パーセンテージを使用できます.参照オブジェクトは自己です.
2.scaleスケーリングtransform:scale(sx,sy)/ここでsxはx方向のスケーリングを表し、syはy方向のスケーリングを表し、syは指定値がなければsxと等しい
3.rotate時計回り角度transform:rotate(15 deg)
4.skew変形transform:skew(ax[,ay])/axはx方向の時計回りの角度を表し、ayはy方向の時計回りの角度を表し、ayが値を指定していない場合、y方向は傾斜していない.
二.animationは主に8つの属性から構成されています:animation-name(@keyframes定義の名前animation-duration(持続時間):取値と用法は上のtransitionと同じanimation-timing-function(アクティブ関数):取値と用法は上のtransitionと同じanimation-delay(遅延時間):取値と用法は上のtransitionと同じanimation-iteration-count(回数):有限回数を設定できます.無限回数infinite animation-direction(方向):1)normal順方向再生(0%-100%)2)reverse逆再生(100%-0%)3)alternate奇数回順方向再生、偶数回逆再生4)alternate奇数回逆再生、偶数回順方向再生animation-fill-mode(充填モード):取値は:1)forwardsアニメーションが完了すると、最後のアトリビュート値を保持(最後のキーフレームで定義)2)backwards animation-delayが指定した期間、アニメーション表示の前に開始アトリビュート値(最初のキーフレームで定義)animation-play-state(実行状態):可能な値は:1)runningアニメーション実行2)pausedアニメーション一時停止を適用します.一般的にjsで制御されます.
注意:animation-directionを使用する場合、animation-iteration-countの2回は往復を表す
使用方法:

div {
  animation: animateName 5s;
}
@keyframes animateName {
  from {
  }
  50% {
  }
  to {
  }
}

参照先:https://blog.csdn.net/allenyhy/article/details/81608647