一、transition过渡

• transition-property: 要运动的样式(all || [attr] || none)
• transition-duration: 运动时间
• transition-delay:延迟时间

• transition-timing-function: 运动形式

  - ease: 逐渐变慢(默认值)
  - linear: 匀速
  - ease-in: 加速
  - ease-out: 减速
  - ease-in-out: 先加速后减速
  - cubic-bezier: 贝塞尔曲线(x1, y1, x2, y2 )
  
  transition: all 2s;  // 所有属性，过渡时间2s
  transition: width 2s, height 3s;

  > 贝塞尔曲线在线编辑: http://cubic-bezier.com/
  

二、过渡事件

• Webkit

    // 添加事件
    obj.addEventListener('webkitTransitionEnd',function(){},false);
    // 删除事件
    obj.removeEventListener('webkitTransitionEnd', fn,false);

• firefox

    // 添加事件
    obj.addEventListener('transitionend',function(){},false);
    // 删除事件
    obj.removeEventListener('transitionend', fn,false);

  > 
  > // 添加事件
  > function addEvent(obj, fn){
  >  obj.addEventListener('webkitTransitionEnd', fn,false);
  >  obj.addEventListener('transitionend', fn,false);
  > }    
  
  > // 删除事件
  > function removeEvent(obj, fn){
  >  obj.removeEventListener('webkitTransitionEnd', fn,false);
  >  obj.removeEventListener('transitionend', fn,false);
  > }
  

三、transform形变(2d)

• rotate() 旋转函数 取值度数

  - deg 度数
  - transform-origin 旋转的基点
  
  // 以矩形右上角为基点旋转
  transform-origin: right top;
  // 以矩形左上角为基点旋转
  transform-origin: 0 0;
  // 旋转30度
  transform: rotate(30deg);

• skew() 倾斜函数 取值度数

  - skewX()
  - skewY()
  
  // x轴和y轴方向，斜切30度
  transform: skewX(30deg) skewY(30deg);

  ![skewX](http://upload-images.jianshu.io/upload_images/1801379-c7ea30969246f707.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  ![skewY](http://upload-images.jianshu.io/upload_images/1801379-6ff57497f557c2bb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
  

• scale() 缩放函数 取值 正数、负数和小数

  - scaleX()
  - scaleY()
  
  // 矩形缩小为0.9
  transform: scale(0.9);

• translate() 位移函数

  - translateX()
  - translateY()
  
  // 往右平移30px
  transform: translateX(30px)

  > 案例: 钟表