transfrom&transition&ani

transform

transform是才css3动画的主要部分，可以实现旋转、缩放、倾斜、移动等动画，
主要用到的有

• rotate(角度)：沿中心点旋转一定的角度，例如：rotate(30deg);
• scale(方法倍数)：沿中心点放大一定的倍数，例如：scale(2);
• translate(x轴上的位移，y轴上的位移)：左上角移动到相应的位置：例如translate(100px,100px);
• skew(x轴上的倾斜角度,y轴上的倾斜角度)：改变元素的倾斜角度，例如：skew(30deg, 60deg);
  值得注意的是transform变化以后，不会改变元素固有的属性，可以理解为只是在视觉上产生了变化（只是改变状态未改变其真正的属性）。例如元素原本的left是100px；使用translate改变位置以后，然后获取left的值还是100px;
  具体使用（由于兼容性问题，实际运用一定要加上前缀）：

-webkit-transform: translate(200px,200px) scale(3) rotate(30deg);
-moz-transform: translate(200px,200px) scale(3) rotate(30deg);
-ms-transform: translate(200px,200px) scale(3) rotate(30deg);
 -o-transform: translate(200px,200px) scale(3) rotate(30deg);
transform: translate(200px,200px) scale(3) rotate(30deg);

但是transform在单独使用的时候并不会产生动画效果，页面加载的时候就已经在变化后的状态了，所以需要搭配transition使用，产生动画效果。

transition

transition: 设置过渡效果的 CSS 属性的名称(width, height, left, right或者用all表示所有属性都可以)
完成过渡效果需要多少秒或毫秒 (2s)
规定速度效果的速度曲线 (linear匀速\ease慢快慢\eare-in慢快\eare-out快慢\ease-in-ou慢快慢,和eare速度上有差异)，这个属性还可以使用cubic-bezier(n,n,n,n)自己定义，n的范围在0-1之间。
定义过渡效果何时开始(2s)
具体使用：

transition: width,2s,linear,2s;

hover或者其他操作的时候

width: 400px;

搭配transform使用：

transition: all,2s,linear,2s;

hover或者其他操作的时候

transform: rotate(30deg);

animation

animation可以实现连续的动画，常用的格式如下：

animation： move1 2s  infinite；

@keyframes move1{
   form{left: 100px;}
   to{left: 300px;}

animation： move1 2s  infinite；

@keyframes move1{
            0%{
                left: 100px;
            }20%{
                left: 300px;
            }50%{
                top:300px;
            }100%{
                width:500px;
            }
        }