CSS3動效(Transitions、Transforms、Animation)

理解：

1. transition 過渡 連續的、從a到b
2. transform 變換 旋轉、縮放、偏移
3. animation 動畫

 

1、transition

1.理解

　　過渡，用於平滑的改變CSS值，舉個例子：

change{
　　width:100px;
　　height:100px;
　　background:yellow;
　　transition:background 10s;
}
change:hover{
　　background:red;
}

　　意思就是說先在change這個css樣式裏面「聲明」：若是個人background屬性發生了變化，那麼它的變化過程是連續變化（漸變），這個變化過程持續10s。

　　因此，transition 就是用來定義，當一個變化發生時，它變化的連續性和時間，以及連續過程的快慢狀況的（先慢後快、先快後慢等）。

　　transition不控制變化的產生，而是隻控制變化發生後的過渡效果。

2.使用

　　transition屬性是下面幾個屬性的縮寫:

• transition-property指定哪一個屬性應用過渡，好比transition-property:background就是指定background屬性應用過渡。
• transition-duration指定這個過渡的持續時間
• transition-delay過渡延遲多長時間開始
• transition-timing-function指定過渡動畫緩動類型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()

其中，linear線性過分，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。

　　使用transition能夠將這些屬性合併來寫，順序爲  屬性  持續時間  過渡類型  延遲時間

2、transform

1.理解

　　transition不控制變化的產生，與之相對，transform就是用來產生變化的，好比選擇，縮放等等。可是transform的變化是沒有過渡效果的，就是直接顯示變化過的樣子了，咱們將transition和transform一塊兒用，就能產生漸變的動畫效果了。好比旋轉，移動等等。

2.使用

　　2D轉換

• translate(x,y)　　相對於當前位置移動　　值100px  表示100像素　　translateX()  translateY()
• rotate(角度)　　順時針旋轉（負值表示逆時針旋轉）　　值30deg 表示30度
• scale(a,b)　　尺寸縮放　　值2  表示縮放2倍　　scaleX()  scaleY()
• skew( 角度,角度)　　翻轉，x方向，y方向　　值30deg　　表示30度　　skewX()  skewY()

　　可使用matrix(n,n,n,n,n,n)將這些變化整合在一塊兒（實際上上面四個變換的本質都是經過 matrix 矩陣來實現的，若是要實現沒有提供的效果，能夠經過這個函數直接控制）

　　【注】：transform變換的參照點默認爲中心點，能夠經過transform-origin(a,b)改變參照點的位置,a,b的值能夠是百分比，px，em等，或者left center right  top bottom center

　　3D轉換

• translate3d(x,y,z)　　3D移動　　translateX(x) translateY(y) translateZ(z)
• scale3d(x,y,z)　　3D縮放　　scaleX(x) scaleY(y) scaleZ(z)
• rotate3d(x,y,z,angle)　　3D旋轉　　rotateX(angle) rotateY(angle) rotateZ(angle)
• prespective(n)　　透視視圖

transition和transform一塊兒使用的例子：

.change{
    transition:all 2s ease;
}
.change:hover{
    transform:rotate(720deg) scale(2,2);
}

 

 3、animations 

　　經過一塊兒使用transition和transform已經能夠實現一些動畫效果，可是對於複雜的動畫，使用animations更加合適。

1.簡介

　　@keyframes (關鍵幀)用於建立動畫，寫法：　　

@keyframes name{
    from{//start css
    }
    to{//end css
    }
}
//or
@keyframes name{
    0%{//start css
    }
    50%{//center css
    }
    100%{//end css
    }
}

【注】：使用關鍵幀先定好動畫變換過程當中的關鍵樣式，而後再使用連續變化或者不連續變化實現動畫效果

　　animation  經過關鍵幀產生動畫效果，全部動畫效果的簡寫屬性，例子：

div{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;
}

@keyframes myfirst{
    from {
        background:red;
    }
    to {
        background:yellow;
    }
}    

2.屬性

animation-name　　@keyframes動畫的名稱

animation-duration　　動畫完成一個週期所需的秒或者毫秒

animation-timing-function　　動畫的速度曲線 

• 　　linear　　勻速
• 　　ease　　默認 慢-快-慢
• 　　ease-in　　以快結束
• 　　ease-out　　以慢結束
• 　　ease-in-out　　以慢開始和結束　　和ease的區別：ease-in-out中間部分是近似勻速的
• 　　cubic-bezier(n,n,n,n)　　貝塞爾曲線　　n取值0或者1
• 　　step-start　　在幀間變化的過程當中，如下一幀的顯示效果來填充間隔動畫，即不連續動畫（逐幀動畫）
• 　　step-end　　以上一幀的顯示效果來填充間隔動畫
• 　　steps()　　能夠傳入兩個參數，第一個是一個大於0的整數，他是將間隔動畫等分紅指定數目的小間隔動畫，而後根據第二個參數(start/end)來決定顯示效果。第二個參數設置後其實和step-start，step-end同義，在分紅的小間隔動畫中判斷顯示效果。

animation-delay　　動畫何時開始（秒或者毫秒）

animation-iteration-count　　動畫被播放的次數　　數字或者infinite(無限)

animation-direction　　是否反向播放動畫　　

• 　　normal　　 正常播放 正向
• 　　reverse　　反向播放
• 　　alternate　　動畫在奇數次正向播放，在偶數次反向播放
• 　　alternate-reverse　　動畫在奇數次反向播放，在偶數次正向播放
• 　　initial　　默認值
• 　　inherit　　從父元素繼承

animation-fill-mode　　動畫不播放時，應用到元素的樣式

• 　　none　　默認，無
• 　　forwards　　動畫停留在結束幀
• 　　backwords　　動畫完成後停留在初始幀
• 　　both　　同時遵循forwards和backwords
• 　　initial　　默認值
• 　　inherit　　從父元素繼承

animation-play-state　　動畫運行和暫停

• 　　paused　　 暫停
• 　　running　　運行

 3.animation簡寫

　　能夠經過animation來將這些元素寫在一塊兒：

 animation: name duration timing-function delay iteration-count direction fill-mode play-state; 

　　具體一點：

 animation:myAnim 1s linear 1s infinite alternate both running;