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交互不是很紧密