CSS3中動畫屬性transform、transition和animation

Transform：變形

　　在網頁設計中，CSS被習慣性的理解爲擅長表現靜態樣式，動態的元素必須藉助於javascript才能夠實現，而CSS3的出現改變了這一思惟方式。CSS3除了增長革命性的創新功能外，還提供了對動畫的支持，能夠用來實現旋轉、縮放、平移、扭曲和過渡效果等等，這些功能再一次證實了CSS3功能的強大和無限潛能。

　　CSS3實現元素變形的基礎來源於新增的transform屬性，該屬性可用於實現元素的旋轉、縮放、平移、扭曲等效果。目前webkit內核支持-webkit-transform私有屬性，Mozilla Geckos內核支持-moz-transform私有屬性，IE瀏覽器支持-ms-transform私有屬性。

　　在部分的test case當中，往往演示transform屬性的，看起來好像都是帶動畫。這使得小部分直覺化思惟的人（包括我）認爲transform屬性是動畫屬性。而偏偏相反，transform屬性是靜態屬性，一旦寫到style裏面，將會直接顯示做用，無任何變化過程。transform的主要用途是用來作元素的特殊變形，對於作設計的人來講並非很陌生，簡單的來講就是css 的圖形變形工具。

　　關於圖形變形的基礎條件當中的原點設定，在css裏面使用的是transform-origin來定義的。

　　關於圖形變化的模式，css3標準當中transform-style來定義。默認是flat，展示出來的是簡單的效果。而preserve-3d則將空間呈現爲3d模式。

　　若是須要使用3d模式，必須先指定style爲3d，並在任意父元素上增長 perspective及 perspective-origin 來指定透視點。

　　整體看來 css transform的屬性和原來使用的left ，right ，top， bottom 的屬性從動靜角度來講沒有任何區別，所以使用的時候應該將transform歸類到這類定位變形的靜態屬性裏面。

用法分析：

　　Transform字面上就是變形、改變的意思。在CSS3中transform主要包括如下幾種：旋轉rotate、扭曲skew、縮放scale和平移translate。

　　語法：

　　　　transform ： none | transform-function [ transform-function ]*

　　　　也就是：transform: rotate | scale | skew | translate;

　　none:表示不進麼變換；transform-function表示一個或多個變換函數，以空格分開；換句話說就是咱們能夠同時對一個元素進行transform的多種屬性操做，例如rotate、scale、translate三種。但這裏須要提醒你們，以往咱們疊加效果都是用逗號（「，」）隔開，但transform中使用多個屬性時只須要用空格隔開。

　　主要是如下幾個點：1、旋轉rotate；2、平移translate；3) 縮放scale；4) 扭曲skew；5)transform-origin(x, y)

　　這裏就只說skew和transform-origin：

　　skew(angle [, angle]) ：設置X軸與Y軸上的斜切變換。skew是用來對元素進行扭曲變形，第一個參數是水平方向扭曲角度（即垂直的高度不變，水平方向變），第二個參數是垂直方向扭曲角度，其中第二個參數是可選參數，若是沒有設置第二個參數，那麼Y軸爲0deg。一樣是以元素中心爲基點，咱們也能夠經過transform-origin來改變元素的基點位置。具體展現請查看。

　　還有改變元素基點的transform-origin：它的主要做用就是在進行transform動做以前能夠改變元素的基點位置，由於元素默認基點就是其中心位置，換句話說沒有使用transform-origin改變元素基點位置的狀況下，transform進行的rotate、translate、scale、skew等操做都是以元素本身的中心位置進行變化的。

　　但有時候咱們須要在不一樣的位置對元素進行這些操做，那麼就可使用transform-origin來對元素進行基點位置改變，使元素基點不在中心位置，以達到須要的基點位置，下面咱們主要來看看其使用規則。

　　transform-origin(x, y)：用來設置元素的運動的基點（參照點），默認點是元素的中心點。其中x和y的值能夠是百分值、em、px，其中x也能夠是字符參數值left、center、right；y和x同樣除了百分值外還能夠設置字符參數值top、center、bottom，這樣的設置有點像background-position的寫法同樣。

 

Transition：過分

　　在頁面開發中常常會藉助JS來書寫大量的特效，以得到較好的頁面感官效果。可是真正到了使用JS來操做的時候，每每會由於思惟邏輯不清晰而顯得很凌亂。同時爲了不JS對頁面的性能產生影響，咱們今天就來嘗試下不借助任何JS，轉而使用CSS3過渡來書寫出更好的動畫效果。

　　W3C標準中對CSS3的transition是這樣描述的：「CSS3的transition容許CSS的屬性值在必定的時間區間內平滑地過渡。這種效果能夠在鼠標單擊、得到焦點、被點擊或對元素任何改變中觸發，並圓滑地以動畫效果改變CSS的屬性值。」

　　在實際的開發中，常常會遇到手機上的JS動畫卡頓現象，因此須要借用其餘辦法來替代使用，而CSS3的過渡就能夠很好的解決這個問題

　　transition屬性是一個簡單的動畫屬性，很是簡單很是容易用。能夠說它是animation的簡化版本，是給普通作簡單網頁特效用的。好比你有以下兩個樣式：

<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>

　　同時，若是在transition的動畫當中，屬性值有了新的變化，則會中斷當前的動畫執行，並將中斷時的屬性值提供給新的動畫做爲起始值來計算新的動畫效果。

Transition的語法

　　下面一樣從其語法和屬性值開始一步一步來學習transition的具體使用。

　　transition ： <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>;

　　transition主要包含四個屬性值：

　　　　1、執行變換的屬性：transition-property；

　　　　2、變換延續的時間：transition-duration；

　　　　3、在延續時間段，變換的速率變化：transition-timing-function；

　　　　4、變換的延遲時間：transition-delay。

　　有時不僅改變一個CSS效果的屬性，而是想改變兩個或者多個CSS屬性的transition效果，那麼只要把幾個transition的聲明串在一塊兒，用逗號（「,」）隔開，而後各自能夠有各自不一樣的延續時間和其時間的速率變換方式。

　　但須要值得注意的一點：transition-delay與transition-duration的值都是時間，因此要區分它們在連寫中的位置，通常瀏覽器會根據前後順序決定，第一個能夠解析爲時間的值爲transition-duration，第二個爲transition-delay。

 

Animation：動畫

　　單從Animation字面上的意思，就知道是「動畫」的意思。但CSS3中的Animation只應用在頁面上已存在的DOM元素上，並且跟Flash和JavaScript以及jQuery製做出來的動畫效果又不同，由於使用CSS3的Animation製做動畫能夠省去複雜的js、jQuery代碼。

　　固然CSS3也有一點不足，咱們運用Animation能建立本身想要的一些動畫效果，可是有時會有卡頓現象。因此若是想要製做比較好的動畫，建議你們仍是使用CSS3與js相結合的書寫方式。

　　作過Flash動畫的人都會知道，Flash裏面有兩個基礎武器：時間軸和關鍵幀。前面在使用transition製做一個簡單的transition效果時，包括了初始屬性和最終屬性，一個開始執行動做時間和一個延續動做時間以及動做的變換速率。其實這些值都只是一箇中間值，若是咱們要控制的更細一些，好比說要第一個時間段執行什麼動做，第二個時間段執行什麼動做。這樣再用Transition就很難實現了，因此此時也須要這樣的一個「關鍵幀」來控制。

　　在官方的Introduction上介紹這個屬性是transition屬性的擴展。可是這個簡單的介紹裏面包含了不簡單的東西：keyframes。

　　Keyframes具備其本身的語法規則，它的命名是由"@keyframes"開頭，後面緊接着是這個「動畫的名稱」加上一對花括號「{}」，括號中就是一些不一樣時間段樣式規則，有點像咱們css的樣式寫法同樣。

　　對於一個"@keyframes"中的樣式規則是由多個百分比構成的，如「0%」到"100%"之間，能夠在這個規則中建立多個百分比，分別在每個百分比中給須要有動畫效果的元素加上不一樣的屬性，從而讓元素達到一種在不斷變化的效果，好比說移動、改變元素顏色、位置、大小、形狀等。

　　不過有一點須要注意的是，可使用「from」和「to」來表明一個動畫是從哪開始，到哪結束。也就是說這個 "from"就至關於"0%"，而"to"至關於"100%"。值得一說的是，關鍵幀中的數值段必須是百分數，若是不是百分數，這個keyframes是無效的，不會起任何做用。由於keyframes的單位只接受百分比值。

　　看一個簡單的 keyframes 的示例：

<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>

　　上面這個代碼展現了一個keyframes 'wobble'，其中 0％ 表明在變化中不一樣時間點的屬性值，你能夠較精確的控制動畫變化中任何一個時間點的屬性效果。而animation則根據這個keyframes提供的屬性變化方式去計算元素動畫當中的屬性。與 transition 不一樣的是，keyframes提供更多的控制，尤爲是時間軸的控制，這點讓css animation更增強大，使得flash的部分動畫效果能夠由css直接控制完成，而這一切，僅僅只須要幾行代碼，也所以誕生了大量（比起flash來講算是大量了）基於css的animation tools，用來取代flash的動畫部分。

　　另外在animation屬性裏面還有一個最重要的就是：animation-fill-mode，這個屬性標示是以(from/0%)指定的樣式 仍是以(to/100%)指定的樣式爲動畫完成以後的樣式。這個很方便咱們控制動畫的結尾樣式，保證動畫的總體連貫。

　　CSS3的Animation相似於Transition屬性，都是隨着時間改變元素的屬性值。主要區別是Transition須要觸發一個事件(hover事件或click事件等)纔會隨時間改變其CSS屬性；而Animation在不須要觸發任何事件的狀況下也能夠顯式的隨着時間變化來改變元素CSS的屬性值，從而達到一種動畫的效果。

　　Animation和Transition同樣有本身相對應的屬性，那麼在Animation主要有如下幾種屬性：動畫名稱(animation-name)、動畫持續時間(animation-duration)、動畫的速度曲線(animation-timing-function)、動畫延遲時間(animation-delay)、動畫播放次數(animation-iteration-count)、動畫播放方向(animation-direction)。

 

 

 

 

參考：

http://www.jb51.net/css/496935.html

https://mp.weixin.qq.com/s/aPWZPhIb1a928okjcLNPhA

https://mp.weixin.qq.com/s/IPS6oZRM_Ie6ZQU21-V9QA

https://mp.weixin.qq.com/s/fmo5ogDucgyYw_cl5Fck0Q