动画transition、animation

--- 动画 transform、transition、animation、

• 2D转换transform：translat(x,y)|rotate(30deg)|scale(x,y)缩放|skew(30deg,20deg)水平垂直翻转角度|matrix()2D方法组合
• • 3D转换：rotateX(120deg)|rotateY()|
• 过渡效果：transition-property:color background|transition-duration|transition-timing-function:sase/liner/ease-in/ease-out/ease-in-out/cubic-bezier（num,num,num,num）|transition-deley|
  简写： transition: property duration timing-function delay;
  过渡的属性，完成过度效果需要时间，速度曲线，延迟时间
  .one1{transition: width 3s linear 2s;} .one1:hover{width:300px;}
• animate动画：@keyframes规则：animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count:inifinite/number|animation-direction:normal/alternate动画播放方向|animation-play-state:running/paused元素动画播放状态
  animation的使用必须结合@keyframes animation-name使用
  animation: name duration timing-function delay iteration-count direction;
  @-webkit-keyframes move {
  form{ left:0px;} to{ left:200px;}
  }
• transition&animation区别：

1. 触发条件不同。transition通常和hover等事件配合使用，由事件触发。animation则立即播放。
2. 循环。 animation可以设定循环次数。
3. 精确性。 animation可以设定每一帧的样式和时间。tranistion 只能设定头尾。 animation中可以设置每一帧需要单独变化的样式属性， transition中所有样式属性都要一起变化。
4. 与javascript的交互。animation与js的交互不是很紧密。tranistion和js的结合更强大。js设定要变化的样式，transition负责动画效果，天作之合，比之前只能用js时爽太多。

• 贝塞尔曲线：cubic-bezier(n,n,n,n)自定义平滑曲线。贝塞尔曲线有4个点，左下为起始点P0坐标固定为(0,0)，右上为终点P3坐标固定为(1,1)，中间有两点P1和P2的坐标就是cubic-bezier(n,n,n,n)的参数。通过4条连起来的直线，生成平滑的曲线。
  linear是匀速过渡，ease是先快再慢的节奏，ease-in是加速冲刺的节奏，ease-out是减速到停止的节奏，ease-in-out是先加速后减速