transfrom、transition、animation區別

transfrom

transform是靜態屬性，非動畫屬性，和margin-left、margin-top相似。

• translate：平移，相似position:relative;translate()分三種狀況：

  • translate(x, y) // 水平、垂直方向移動
  • translateX(x) // 水平方向移動，至關於translate(x, 0)
  • translateY(y) // 垂直方向移動，至關於translate(0, y)

• scale：縮放，x,y能夠是負數，負數的狀況縮放並反轉

  • scale(x, y) // 水平、垂直方向縮放，第二個參數未提供則取與第一個同樣的值
  • scaleX(x) // x軸縮放
  • scaleY(y) // y軸縮放

• rotate：旋轉，整數順時針，負數逆時針

  • transform:rotate(90deg);
  • transform-origin:top center; // 變形的基點，默認中心點
• skew：斜角變換
  • skew(x, y) // 沿x軸、y軸進行扭曲變形，第二個參數未提供取值爲0
  • skewX(x) // 沿x軸進行扭曲變形
  • skewY(y) // 沿y軸進行扭曲變形
• matrix：將全部的2D效果所有組合在了一塊兒使用

transition

animation的簡化版本

• transition: all 1s ease 0; // 過渡效果的css屬性名稱、過渡效果時間、速度曲線、延遲時間

animation

• animation: move 1s ease 0 infinite alternate; // keyframe名字、過渡效果時間、速度曲線、延遲時間、循環次數、是否輪流反向播放動畫
• 定義keyframe：@keyframes name {}

transition和animation作動畫

常和transfrom配合使用，區別以下：

	transition	animation
觸發條件	一般和hover等事件配合，由事件觸發	和gif差很少，當即播放
循環	不能循環	可設置循環次數
精確性	只能設置頭尾，全部樣式屬性都要一塊兒變化	能夠設置每一幀的時間和樣式，每一幀變化的樣式能夠單獨設置
與JavaScript的交互	tranistion和js的結合更強大。js設定要變化的樣式，transition負責動畫效果	與js交互不是很緊密