css3 動畫

時間  2019-11-20
標籤 css3 css 動畫 欄目 CSS 简体版
原文   原文鏈接

轉載 http://www.cnblogs.com/jikey/archive/2010/06/21/1761894.htmlphp

CSS 3的屬性好比border-radius、box-shadow和 text-shadow在 webkit(Safari、Chrome等)和Gecko(Firefox)等先進的瀏覽器中的使用開始出現增加的勢頭。它們(這些CSS屬性)已經爲 用戶建立更輕量的頁面和更豐富的體驗，並且它們能夠優雅的降級。然而，這些只是CSS 3能爲咱們作的衆多事情中的一小部分。css

在本文中，咱們將走的更遠，看一看 變形(transformation)、轉換(transition)和動畫(animation)等更高級的CSS3技術。咱們將涉及代碼自己、瀏覽器支持以及一些能夠正確地展現這些新屬性是如何即提高你的設計又加強總體用戶體驗的例子。html

CSS 變形(Transformation)

CSS變形是一個W3C草案。但當我第一次坐下來閱讀它的所有特性以瞭解一些東西的時候，它並無讓我開竅。這個文檔是用技術術語的水平寫的，你能夠想象的到，可是它關注於變形的圖形(好比繪圖)元素和矩陣。大一學習微積分以後就沒有碰過矩陣了，我必須爲本章節作不少好的舊瀏覽器測試以及猜想和檢驗。前端

在看完我能找到的每個教程和大量的瀏覽器測試以後，我總結出一些你們都能從中獲益的有用的關於CSS變形的信息。html5

transform

transform屬性實現了一些一樣可用於SVG的功能。它可用於內聯(inline)元素和塊級(block)元素。它容許咱們旋轉、縮放和轉化元素，只須要一行CSS代碼。css3

一些前沿設計的最大詬病就是文字不可選(必需要使用切圖的方法實現)。當你熟練使用變形屬性來控制文字的時候，這就再也不是一個問題了，由於這是個純CSS方法，因此元素內的文字會保持可選。這是CSS相對於使用圖片(或背景圖片)的一個巨大優點。web

一些有趣而有用的變形功能：瀏覽器

  • rotate
    Rotate(轉動)容許你經過傳遞一個度數值來轉動一個對象。
  • scale
    Scale是一個縮放功能，可讓任一元素變的更大。它使用正數和負數以及小數。
  • translate
    Translate就是基於X和Y 座標從新定位元素
  • skew
    顧名思義，skew就是要將對象傾斜，參數是度數
  • matrix
    transform支持矩陣變換，就是基於X和Y 座標從新定位元素

讓咱們更深刻的瞭解每個功能吧。安全

Rotate

變形屬性有不少用法，其中一個就是旋轉。旋轉就是基於度數轉動一個對象並可用於內聯元素和塊級元素，它能夠實現一個確實很酷的效果。app

Transform Rotate in What You Need To Know About Behavioral CSS

1
2
3
4
5
 
#nav{
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }

請注意在IE8中(非標準模式)它須要你寫成「-ms-filter」而不是「filter」。

瀏覽器支持

瀏覽器對旋轉的支持是使人驚奇的普遍。在上面的CSS片斷中，咱們直接寫上-webkit-和-moz-前綴而後將#nav元素旋轉-90度。

至關簡單吧？惟一的問題是對於一個至關重要的設計元素，若是IE不支持，不少設計師就會不情願使用它。

幸運的是，IE有這方面的濾鏡:圖形旋轉濾鏡。它能夠有4個旋轉值：0, 1, 2,和3。你將不會得到和Webkit和Gecko同樣的精密控制，可是至少在必定程度上保持統一(甚至IE6)。

縮放

縮放並不像你想象的那樣工做：縮小和放大一個元素。縮放功能同時採用寬和高兩個值，這些值能夠是正數、負數和小數。

正數值放大一個元素，正如你指望的那樣，基於制定的寬度和高度。

負數值並不會縮小元素，而是翻轉它(好比，文字被反轉)而後相應的縮放它。然而，你可使用小於1的小數(例如.5)來收縮或者縮小一個元素。

Transform Scale in What You Need To Know About Behavioral CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
#nav {
 /* nav元素的寬和高都會被放大雙倍 */
 -webkit-transform: scale(2);
 -moz-transform: scale(2); }
#nav {
 /* nav元素的寬會是雙倍，而高度保持不變 */ 
 -webkit-transform: scale(2, 1); 
 -moz-transform: scale(2, 1);
 }
#nav {
 /* nav的寬度將是雙倍，而且水平翻轉，可是高度保持不變 */ 
 -webkit-transform: scale(-2, 1); 
 -moz-transform: scale(-2, 1); 
 }

瀏覽器支持

縮放屬性目前只有Firefox, Safari 和Chrome支持，可是到目前爲止沒有一個IE版本支持。縮放一個對象是一個至關有意義的設計選擇，可是它能夠經過漸進加強來使用:hover，這能夠在你的導航上添加一個小小的趣味。

1
2
3
4
 
#nav li a:hover{
 /* 這可讓你的導航連接在鼠標通過的時候輕微的放大 */ 
 -webkit-transform: scale(1.1); -moz-transform: scale(1.1); 
 }

轉化

這個名稱「轉化(translate)」有點容易誤導。它事實上是一種使用X和Y值定位元素的方法。

它看起來很像其它的變形方法，只是給你的網站添加一個額外的層面

Transform Translate in What You Need To Know About Behavioral CSS

1
2
3
4
5
 
#nav{
 /* 這會將nav元素向左移動10像素並向下移動20像素 */
 -moz-transform: translate(10px, 20px);
 -webkit-transform: translate(10px, 20px); 
}

瀏覽器支持

轉化屬性目前只被Firefox, Safari 和Chrome支持，並且還要使用瀏覽器的私有前綴-moz- 和-webkit-。

Skew

Skew也是一個頗有用的transform功能，它能夠將一個對象圍繞着x和y軸按照必定的角度傾斜。這和rotate的旋轉不同，rotate只是旋轉，而不會讓元素的形狀改變。skew會讓一個元素的形狀改變。skew有兩個參數，分別表明x和y軸的傾斜度數。

1
2
3
4
5
 
#nav{
 /* 這會將nav元素向左移動10像素並向下移動20像素 */
 -moz-transform: skew(30deg, -10deg);
 -webkit-transform: skew(30deg, -10deg); 
}

瀏覽器支持

Skew屬性目前只被Firefox, Safari 和Chrome支持，並且還要使用瀏覽器的私有前綴-moz- 和-webkit-。

Matrix

沒錯，Matrix就是矩陣，矩陣是高等數學中很是基礎的一個東東，而在CSS 3中確實一個至關高級的功能，CSS 3引入matrix函數，能夠很是靈活的實現上述的各類效果。它有6個參數(a,b,c,d,e,f)，它事實上是一個3*3矩陣：
| a b e |
| c d f |
| 0 0 1 |
matrix變換是將舊的參數通過該矩陣進行轉換後生成新值，好吧，我認可個人那些數學知識在畢業的時候都還給老師了，若是你有興趣深刻研究，能夠看一下這裏http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined，這是SVG的一個文檔，可是對於matrix變換的原理是一致的。

讓咱們來看一個例子吧：

1
2
3
4
5
 
#nav{
 /* nav元素將會像右上角傾斜 */
 -moz-transform: matrix(1, -0.2, 0, 1, 0, 0);
 -webkit-transform: matrix(1, -0.2, 0, 1, 0, 0); 
}
瀏覽器支持

可喜的是，IE支持matrix濾鏡，雖然它不支持大部分CSS3變形功能，可是使用它的這個濾鏡，基本也能夠實現相同的效果，不過，你要先搞明白矩陣運算再說。webkit和Firefox(3.5+)都支持該功能。

鏈式變形

變形經常是單獨的，可是若是你想用到多種變形，代碼也是能夠快速整合的，特別是使用私有擴展。幸運的是，咱們有一些內置的縮寫：

1
2
3
4
5
6
7
8
 
#nav{
 -moz-transform: translate(10, 25); 
 -webkit-transform: translate(10, 25); 
 -moz-transform: rotate(90deg); 
 -webkit-transform: rotate(90deg); 
 -moz-transform: scale(2, 1); 
 -webkit-transform: scale(2, 1); 
}

這些變形能夠被鏈到一塊兒，從而讓你的代碼更高效:

1
2
3
4
 
#nav{
 -moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
 -webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1); 
 }

這些屬性的真正的威力是合併到一塊兒。你能夠移動、旋轉、縮放並控制任何內聯元素和塊級元素而不使用JavaScript。一旦這些屬性的支持變的更加普遍，咱們就能夠建立更豐富和更輕量的界面和應用。

transform-origin

transform-origin不是transform的一個子功能，可是和transform關係很是密切。它能夠用來指定transform的起點，好比，rotate變形的默認起點是其中間，你能夠將起點設置在左上角，或者左下角，這樣rotate變形的結果就可能大不相同了。

transform-origin接受兩個參數，它們能夠是百分比，em，px等具體的值，也能夠是left,center,right，或者 top,middle,bottom等描述性參數。幾個例子：

1
2
3
4
5
6
7
8
9
10
 
.class1{-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
...
}
.class2{-moz-transform-origin:100% 100%;
-webkit-transform-origin:100% 100%;
...}
.class3{-moz-transform-origin:top left;
-webkit-transform-origin:top left;
...}
瀏覽器兼容性

該屬性目前也只有webkit和firefox支持，並且須要添加各自的私有前綴。

轉換(transition)

一個涉及到一個CSS屬性的基本的轉換就是定義和移動一個元素從它的靜止狀態(好比，深藍色背景)到它的hover或者激活狀態(好比，淺藍色背景)。

轉換能夠和變形同時使用(以及引起事件，好比:hover 或:focus)以建立一些動畫。淡出背景色彩，滑動一個元素以及讓一個對象旋轉均可以經過CSS轉換實現。

1
2
3
4
5
6
7
8
 
#nav a{ background-color:red; }
 #nav a:hover, #nav a:focus{
 background-color:blue;
 /* 告訴轉換去應用到background-color 屬性(看起來像一個CSS 參數，不是嗎？ #foreshadowing)*/
 -webkit-transition-property:background-color;
 /* 讓它持續兩秒鐘*/
 -webkit-transition-duration:2s;
}

轉換的一些參數

  • transition-property

    指定轉換的CSS屬性名稱，好比，上面的例子中，將轉換應用於background-color屬性。

  • transition-duration

    定義轉換花費的時間（從舊屬性換到新屬性花費的時間）

  • transition-timing-function

    能夠理解爲過分效果。指定轉換過程當中的中間值。能夠用cubic-bezier指定。固然有幾個經常使用的內置值：ease | linear | ease-in | ease-out | ease-in-out

  • transition-delay

    這個比較容易理解，就是轉換延遲的時間。時間能夠爲正整數、負整數和零，非零的時候必須設置單位是s(秒)或者ms(毫秒)，爲負數的時候，轉換的動做會從該時間點開始顯示，以前的動做被截斷。

注：參數部分爲前端觀察翻譯時添加，原文中沒有。

瀏覽器支持

像變形屬性同樣酷，可是目前只有WebKit瀏覽器支持。-moz-transition已經在最近的 nightly-build版本的Firefox 3.7中可用(也就是未來可用)。所以能夠安全的假設在webkit上是可行的。你也能夠添加-moz-transition到你的CSS中以實現未來的 加強。甚至能夠添加一個不用私有前綴的屬性，以防萬一。

Animation

動畫是CSS 3真正有用的地方。你能夠將咱們在上面討論的全部的元素與動畫屬性好比animation-duration、animation-name 和animation-timing-function整合以建立像Flash動畫同樣的效果——純CSS。

  
#rotate {
 margin: 0 auto;
 width: 600px;
 height: 400px; 
 /* Ensures we're in 3-D space */
 -webkit-transform-style: preserve-3d;
 /*Make the whole set of rows use the x-axis spin animationfor a duration of 7 seconds, running infinitely and linearly.*/
 -webkit-animation-name: x-spin;
 -webkit-animation-duration: 7s;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear; 
}
 /* 定義要調用的動畫 */
@-webkit-keyframes x-spin { 
 0% { -webkit-transform: rotateX(0deg); } 
 50% { -webkit-transform: rotateX(180deg); }
 100% { -webkit-transform: rotateX(360deg); } 
}

這個夢幻的CSS動畫代碼和在線演示能夠在webkit網站看到。該演示能夠在任何網站看到，可是動畫效果卻只能在WebKit的nightly build版本可見。它看起來就像上面的視頻中的同樣，若是你是在用mac os (雪豹版本)，我認爲安裝一個webkit以親眼看看這個效果是很值得的(它真的很酷)。Windows系統用戶暫時沒法欣賞這個效果。

animation的一些參數

animation的參數和translate有些像，因此若是你理解了translate的參數，這裏就不難理解了。

  • animation-name

    動畫的名稱。

  • animation-duration

    定義動畫播放一次須要的時間。默認爲0；

  • animation-timing-function

    定義動畫播放的方式，參數設置相似transition-timing-function

  • animation-delay

    定義動畫開始的時間

  • animation-iteration-count

    定義循環的次數，infinite即爲無限次。默認是1。

  • -webkit-animation-direction

    動畫播放的方向，兩個值，默認爲normal，這個時候動畫的每次循環都向前播放。另外一個值是alternate，則第偶數次向前播放，第奇數次向反方向播放。

瀏覽器支持

不幸的是，目前，只有少數瀏覽器支持CSS動畫。2D CSS animations 能夠在Safari 4 (Leopard)、Chrome 三、Safari Mobile、 Shira 以及其它Webkit 瀏覽器中工做。Safari 4 (Snow Leopard)支持3D動畫

總結

如今，JavaScript能夠在CSS 3完善以前彌補這個差距。遺憾的是，讓全部瀏覽器支持這些很棒的屬性可能須要一個很長的過程。不用等待那一天的到來，咱們能夠先使用一些嚴謹的漸進加強以及以來Javascript來加強咱們的網站和應用。這不是件壞事，至少如今看起來是。

看了最近的IE9的公告，若是IE團隊添加這些屬性中的一些到這個新的版本的瀏覽器中我不會感到驚訝，他們已經開始考慮整合CSS3了(border-radius)。

web的前景是光明的，特別是由於這些相似動畫的高度實驗性的屬性。儘管不少屬性對客戶或高級產品工做還不可用，至少他們頗有趣！咱們都期待着有一天，咱們能夠支持全部平臺，以創建一些真的很棒的輕量級應用。

參考與資源

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程