CSS3动画

分类

1.transition过渡

2.transform转化

3.animation动画

transition

transition能够实现一个状态到另一个状态的平滑过渡

transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;
后两个属性可以省略

过渡属性：all,none,weigth、height、color、background、border、margin、padding、top、left、right、bottom

运动曲线：linear线性、ease减速、ease-in加速、ease-out减速、ease-in-out先加速后减速

transform转化（2D）

1.缩放scale

transform: scale(x, y);       
transform: scale(2, 0.5);
xy的数值不能是百分比

<div class="box">     
    <div class="box1">1</div>     
    <div class="box2">2</div>     
    <div class="box3">3</div> 
</div>

.box .box2 {             
    background-color: green;             
    transition: all 1s;         
}           
.box .box2:hover {             
    /*width: 500px;*/             
    /*height: 400px;*/             
    background-color: yellowgreen;               
    /* transform:  css3中用于做变换的属性                 
    scale(x,y)：缩放 */             
    transform: scale(2, 0.5);         
}

2.位移translate

transform: translate(水平位移, 垂直位移);