css3 tranform transition animation

tranform：對象圖形變形

tranform的屬性包括：

 

一、none 表示不進行變換；

 

二、rotate 旋轉            transform:rotate(20deg) 旋轉角度能夠爲負數。

須要先有transform-origin定義旋轉的基點可爲left top center right bottom 或座標值（50px 70px）。//也就是說要看要基於哪一點旋轉。

 

三、skew  扭曲             transform:skew(30deg,30deg)  skew(相對x軸傾斜,相對y軸傾斜)

 

四、scale  縮放             transform:scale(2,3) 橫向放大2倍，縱向放大3倍。如等比放大寫一個參數便可。

 

五、translate 移動        transform:translate(50px, 50px);

 

六、perspective 鏡頭到元素平面的距離，全部元素都是放置在z=0的平面上，好比perspective(300px)表示，鏡頭距離元素表面的位置是300px;//該屬性要放在動做屬性以前

 

 

transition:對象的屬性動畫

transition:  property  duration  timing-function  delay;

 

值	描述
transition-property	規定設置過渡效果的 CSS 屬性的名稱。
transition-duration	規定完成過渡效果須要多少秒或毫秒。
transition-timing-function	規定速度效果的速度曲線。
transition-delay	定義過渡效果什麼時候開始。

 

eg：

.div{width:10px;}

.div:hover{transition:width:100px 2s  ease-in-out 1s;}//1s後div原來width:10px變爲100px,所花時間爲2s，速度爲先加速再減速。

值得深刻理解的transition-timing-function狀態變化速度，默認值是ease，不是勻速，是逐漸變慢。

除了ease以外，還有包括一、linear:勻速；二、ease-in:加速；三、ease-out:減速；四、cubic-bezier函數：自定義速度曲線模式。（能夠用工具網站來定製 http://cubic-bezier.com/#.17,.67,.83,.67）；

 

transition的使用注意：

一、目前，各大瀏覽器（包括IE10）都已經支持無前綴的transition，因此transition已經能夠很安全地不加瀏覽器前綴。

二、不是全部的css屬性都支持transition，完整的列表查看（ http://oli.jp/2010/css-animatable-properties/），以及效果（ http://leaverou.github.io/animatable/）；

三、transition須要明確知道，開始狀態和結束狀態的具體數值，才能計算出中間狀態。好比，height從0變到100px;transition能夠算出中間狀態，也就是說，若是開始或結束的設置是height:auto,那麼不會產生動畫效果。相似的狀況還有display:none到block,background:url(1.jpg)到url(2.jpg)等。

transition的侷限：

一、須要時間觸發，因此無法再網頁加載時候自動發送；

二、一次性的，不能重複發生，除非一再觸發；

三、只能定義開始狀態和結束狀態，不定定義中間狀態，也就是隻有兩個狀態；

四、一條transition規則，只能定意思一個屬性變化，不能設計多個屬性。

 

animation:與元素綁定動畫效果，是transition屬性的擴展，彌補他的不足。

animation:  name  duration  timing-function  delay  iteration-count  direction;

 

值	描述
animation-name	規定須要綁定到選擇器的 keyframe 名稱。。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始以前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

 

在學animation以前首先要先弄懂keyframes，叫作關鍵幀。

keyframes是什麼呢，前面咱們再使用transition製做一個簡單的transition效果時候，咱們包括了初始屬性和最終屬性，一個開始執行動做時間和延續動做時間以及動做的變換速率，其實這些都是一箇中間值，若是咱們要控制得更細一點，好比說我要第一時間段執行什麼動做效果，第二個時間段執行什麼動做，transition就沒法實現，此時，咱們可使用keyframes關鍵幀來控制。

keyframes的語法：

@keyframes  animationname { keyframes-selector { css-styles;}}

值	描述
animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時長的百分比。 合法的值： 0-100% from（與 0% 相同） to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

eg:

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}

}

animation:mymove 5s ease 0s infinite alternate

先用keyframes定義一個mymove的動畫名字，總共分紅五個階段的狀態（如上述代碼），而後animation調用，動畫無延遲，無限次無限循環，歷時5s。