css3动画：animation transition transform使用场景及异同

1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜skew
scale(sx,sy)：sx代表缩放向量的横坐标。sy代表缩放向量的纵坐标，如果sy没有指定，默认与sx值相等，这样可以保持一致的缩放比例，保持元素的形状。
scaleX(x),scale(y)=>scale(x,y).若y未被提供，y=x.
translateX(x),translate(y)=>translate(x,y)。若y未被提供，则y为0.
transition和animation两者都能实现动画效果，transform常常配合tranisition和animation使用。
2.transition样式过渡，从一种效果逐渐改变为另一种效果。
transition:transition-property tranisition-duration tranisition-timing-function transition-delay.
例1：
例二：
div{ width：100px; height:100px; transition:transform 2s; }
div：hover{ transform:rotate(180deg); }
3.animation动画由@keyframes来描述每一帧的样式

  animation: name duration timing-function delay iteration-count direction
例一： div{
    animation:myAnimation 5s infinite
    }
    @keyframe myAnimation {
        0%{left:0;transform:rotate(0);} 　　
        100%{left:200px;transform:rotate(180deg);}
    }

区别：**
1）transform仅描述元素的静态样式，常常配合tranisition和animation使用
2）transition通常和hover等事件配合使用，animation是自发的，立即播放
3）animation可以设置循环次数
4）animation可设置每一帧的样式和时间，tranisition只能设置头尾
5）tranisition可与js配合使用，js设定要变化的样式，transition负责动画效果，如：

/*css:*/ 
    div{
      width:100px;
       height:100px;
       transition:all 1s;
     } 
//js
    divEle.onclick = function(){
        divEle.style.width = "200px";
        divEle.style.height = "200px";
        }