2019-06-27 animation、transition、transform

1.transform用于元素旋转、缩放、移动、倾斜等效果
transform是通过修改CSS视觉格式化模型的坐标空间来实现的。属性可以单独使用也可叠加使用。

  transform: scale(2, 0.5) // x轴缩放2倍，y轴缩放0.5倍
  transform: rotate(0.5turn) // 顺时针旋转0.5圈
  transform: rotate(140deg) // 顺时针旋转140度
  transform: translate(120px, 160px) //  x轴平移120px,y轴平移160px
  transform: skew(30deg,20deg) // x轴旋转30度,y轴旋转20度
  transform: matrix(1, 2, 3, 4, 5, 6) // 6个值的矩阵
  transform: scale(0.5) translate(-100%, -100%); // x、y轴缩放0.5倍，再根据自身长宽向左向上translate移动100%（100%是由自身宽高决定的）


2.transition用于较为单一的动画
可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素比如:hover，:active或者通过JsvaScript实现的状态变化。


3.animation一般用于较为复杂、有中间态的动画
  animation属性是如下属性的一个简写形式：animation-name,animation-duration,
  animation-timing-function,animation-delay,animation-iteration-count,
  animation-direction,animation-fill-mode