css3中的屬性 變形(transform)、過渡(transtion)、動畫(animation)

1、transform: 旋轉rotate、移動translate、縮放scale、扭曲skew
    transform:rotate(±30deg)  正數：順時針旋轉，負數：逆時針旋轉。  旋轉
    transform:translate(100px,20px)   translateX translateY   平移
    transform:scale(2,1.5)   scaleX scaleY  縮放
    transform:skew(30deg,10deg)  skewX skewY  扭曲

2、transtion: all 1s ease;
        1、ease：（逐漸變慢）
        2、linear：（勻速）
        3、ease-in：(加速)
        4、ease-out：（減速）
        5、ease-in-out：（加速然后減速）

3.@keyframes規則是創建動畫。

.layer1 {
　　/*animation:動畫名 動畫時長；*/
　　animation:myfirst 3s;

　　}

@keyframes myfirst{
    0% {background: red; left:0px; top:0px;}
 25% {background: yellow; left:200px; top:0px;}
 50% {background: blue; left:200px; top:200px;}
 75% {background: green; left:0px; top:200px;}
 100% {background: red; left:0px; top:0px;}
 /*from{background:red}
 to{background:yellow}*/
}
@-webkit-keyframes myfirst{ /* Safari and Chrome*/
 0% {background: red; left:0px; top:0px;}
 25% {background: yellow; left:200px; top:0px;}
 50% {background: blue; left:200px; top:200px;}
 75% {background: green; left:0px; top:200px;}
 100% {background: red; left:0px; top:0px;}
 /*from{background:red}
 to{background:yellow}*/
}
@keyframes 規則和所有動畫屬性 @keyframes 規定動畫 animation 所有動畫屬性的簡寫屬性，除 animation-play-state animation-name @keyframes 動畫名稱 animation-duration 動畫完成一個周期所花秒或毫秒數。默認是 0 animation-timing-function 動畫的速度曲線。默認是 "ease" animation-delay 動畫延遲多久開始。默認是 0 animation-iteration-count 規定動畫被播放的次數。默認是 1 animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal" animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。

div
{
    animation-name: myfirst;
 animation-duration: 3s;
 animation-timing-function: linear;
 animation-delay: 2s;
 animation-iteration-count: infinite;
 animation-direction: alternate;
 animation-play-state: running;
 /* Safari and Chrome: */
 -webkit-animation-name: myfirst;
 -webkit-animation-duration: 5s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-delay: 2s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;
 -webkit-animation-play-state: running;
}