css3 transform,translate,animation

transform

div {
    transform : rotate(50deg);// 旋轉
    transform : translate( 20px,50px)//元素向下移動 20px ,右邊移動50px;
    transform : scale(2,4);// width： 擴大2倍，height： 擴大 4 倍
    
}

複製代碼

transition

過渡

div{
    transition: width 2s;
    -ms - transition : width 2s;  // -IE9
    -o - transition :width 2s ;//opera
    -moz-transition: width 2s;// firefox
    -webkit - transition : width 2s ;//Chrom Safari
}
複製代碼

animation

div{
    animation: 鎖定選擇器（myAdd） （動畫時間） （速度） （循環次數）
    
}

//速度： linear 勻速
// 循環次數：infinite 

@keyframes myAdd{
    from  {color: red};
    to  {color : blue}
}
或者
@keyframes myAdd{
    0% {};
    20%{}
    40%{}
    60%{}
    80%{}
    100%{}
    
}
複製代碼

transition 和 animation 的區別： transition 是效果的過渡，經過事件的觸發，而後是從一個狀態轉換到另外一個狀態，只有開始和結束 animation 是動畫，是有中間的過渡的 如何讓animation 停留在最後一幀： animation - fill -mode :forwards 開始以前使用初始值： backwords