CSS動畫： 對元素進(jìn)行移動、縮放询筏、轉(zhuǎn)動榕堰、拉長或拉伸——>改變元素的形狀、尺寸和位置

2D轉(zhuǎn)換方法

/*
2D轉(zhuǎn)換方法:
        translate(x,y)      x,y坐標(biāo)的偏移量
        rotate(旋轉(zhuǎn)度數(shù))
        scale(寬度嫌套，高度)     縮放
        skew(x軸傾斜度數(shù)逆屡，y軸傾斜度數(shù))         傾斜
        matrix()            矩陣效果
*/
.div2{
    width: 100px;
    height: 20px;
    background-color:light blue;

    /*坐標(biāo)偏移量X軸Y軸*/
    transform: translate(100px,100px);
    -webkit-transform:translate(100px,100px); /* safari chrome*/
    -ms-transform: translate(100px,100px);/*IE*/
    -o-transform: translate(100px,100px);/*opera*/
    -moz-transform: translate(100px,100px);/*Firefox*/

    /*transform:rotate(180deg);*/
    -webkit-transform: translate(100px,100px) rotate(180deg);
    /*transform:scale(1,2);*/
    -webkit-transform: translate(100px,100px) rotate(180deg) scale(1,2);
}

3D轉(zhuǎn)換方法

3D轉(zhuǎn)換方法：
        rotateX()
        rotateY()
.div3{
    width: 100px;
    height: 100px;
    background-color:light blue;

    /*transform:rotateX(120deg);*/
    -webkit-transform: rotateX(120deg);}

過渡

/*
過渡：
        transition:                     設(shè)置4個過渡屬性
        EXP:    -webkit-transition:width 2s,height 2s, transform 2s; 
        transition-property:            過渡的名稱
        transition-duration:            過渡效果話費(fèi)的時間
        transition-timing-function:     過渡效果的時間曲線
        transition-delay:               過渡效果延時多長時間開始執(zhí)行
*/
.div6{
    width: 100px;
    height: 100px;
    background-color: #d43f3a;
    -webkit-transition: width 2s,height 2s,-webkit-transform 2s;
    transition: width 2s,height 2s,transform 2s;
}
.div6:hover{
    width: 200px;
    height: 200px;

    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);

    -webkit-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -ms-transition-delay: 2s;
    -o-transition-delay: 2s;
    transition-delay: 2s;
}

動畫######

/*
    動畫：
        css3的動畫需要遵守@keyframes規(guī)則
            規(guī)定動畫的時長
            規(guī)定動畫的名稱
*/
.div4{
    width:20px;
    height:20px;
    background-color:red;
    position:relative;/*相對布局*/
    margin: 0px auto;/*上下  左右*/
                        /*  重復(fù)執(zhí)行  */
    animation:anim 5s infinite alternate;
    -webkit-animation:anim 5s infinite alternate;
}
@keyframes anim{
    0%{ background-color:red;    left:0px;     top:0px;   }
    25%{ background-color:green; left:200px;  top:0px;    }
    50%{ background-color:blue;  left:200px;  top:200px;  }
    75%{ background-color:black; left:0px;    top:200px;  }
    100%{background-color:gray;  left:0px;    top:0px;    }
}
@-webkit-keyframes anim{
    0%{  background-color:red;   left:0px;     top:0px;    }
    25%{ background-color:green; left:200px;   top:0px;    }
    50%{ background-color:blue;  left:200px;   top:200px;  }
    75%{ background-color:black; left:0px;     top:200px;  }
    100%{background-color:gray;  left:0px;     top:0px;    }
}