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