-webkit-animation- 實踐

-webkit-animation- 實踐  

2013-01-05 14:55:47|  分類： 技術分享 |  標籤：css3  webkit  animation  |字號 訂閱

今天研究了一下好久以前就像學的css3創意幻燈片效果，也就是Github上比較出名的impress.js，具體demo請戳地址：demo，Github地址請戳：https://github.com/bartaz/impress.js，其實impress不是本篇博文的重點，我會另找時間介紹impress.js這個方便的演示庫用法，重點是我在做者bartaz的github裏面瞎逛，發現一個他以前作的關於CSS 3D 的簡單知識普及幻燈片，就是用impress.js作的，地址以下：CSS 3D，你們是否是剛進去就被那個很3D feel不停左右擺的標題吸引住了！！

 

我以前也有寫過一篇關於CSS3 transition的文章，來向你們介紹CSS3的魅力和一些transition的用法，固然，我只是很粗淺地介紹了CSS3動畫的冰山一角，實際上CSS3所實現的效果已經超乎咱們的想象了，不過客觀上來說，我我的不大建議涉水太深，畢竟這個領域還在探索階段，先把現有知識紮紮實實先學好，閒暇時再搗鼓搗鼓這些效果，纔是正道，嘿嘿。

由於我已經徹底被這種效果吸引了，決定研究一下這個是怎麼實現的，就將其代碼拷貝下來，而後一行行解讀，基本明白了原理，你們注意，我如下講的例子，如標題所說，是webkit內核的瀏覽器，如chrome,safri等瀏覽器才能夠瀏覽的哦！

首先是html代碼：

而後是簡單的字體設置，這個你們隨意吧，我懶就直接複製原網站的效果

 

嗯嗯，完成以上代碼後，就是這樣子的：

但是這個只是第一步，咱們發現最終效果，在轉的時候，會有3D的效果，3D的效果是怎麼出來的呢，沒錯，就是比2D作了一個座標，3D效果出來除了利用自身在不斷循環搖擺以外，還有就是利用自己字體的位置深淺，簡單來講，就是利用字體離屏幕的遠近不一樣，再加上搖擺，便有了3D的效果，那麼如今咱們先爲字體加上深淺的效果，CSS3的transition有一個transform效果，我以前寫的那篇文章裏面也有用到這個效果，具體使用參考能夠移步transform使用參考指南 ，咱們利用到的就是translate屬性，但是設置x，y，z三個座標系，都是參照自身爲止來移動的，你們猜對了，就是利用改變z屬性來改變字距離屏幕距離的，z值設置越大，就離咱們越近，負值反之。

設置完以後就是這個效果，可能有人會奇怪，爲啥沒啥變化，不是說有將字的遠近調整了嗎，怎麼感受他們沒變過，如圖

 

這是由於咱們沒有對h1設置一個很關鍵的屬性：-webkit-transform-style:preserve-3d，這個屬性有兩個值，preserve-3d|flat。前者能夠使其子元素可以在他的3d空間的基礎上應用3d變換，簡單來講，就是這個畫布變成3維的了，加上以後，就是這樣（PS：用了style屬性以後字體會有鋸齒感，多是渲染機制的問題吧，這個問題我不知道你們會不會出現，你們能夠試試）

 

不是同樣麼！！這不是坑爹麼？！！！其實否則，主要是由於如今雖然有深淺效果了，只是由於總體沒有作過透視處理，透視的原理，你們能夠去搜索一下，其實也很簡單，就是想象成鏡頭距離物件的距離，默認是無限遠，就是看起來徹底沒有透視感。火影忍者裏的不少打鬥就大量運用了誇張的透視效果。

 

爲了你們更好地理解，上兩個測試對比圖，能夠看看透視的魅力，哦忘了介紹，透視能夠寫，-webkit-perspective:數值，也能夠直接寫在-webkit-transform裏面。

perspective爲781px時（總體有作過旋轉，方便你們同時看一下translate屬性）

perspective爲309px時效果，那麼你們也能夠知道，

值越小，透視感越強，也就是深淺的感受越強，用數學的解釋，就是座標軸的比例問題

接下來，就是給h1加上-webkit-transition:all 2s ease-in-out;來讓其漸變變換，這個以前寫的transition文章已經介紹過，這裏就不專門解釋了，最後就來到關鍵的一部了，我剛開始一直不理解，demo上面不停循環的擺來擺去的效果是怎麼實現的，而後查了一些資料才知道，是利用CSS的關鍵幀和-webkit-animation的alternate屬性值來實現動畫的，這裏從新說一下animation的用法

這裏引用不懂大師的文章介紹：-webkit-animation的使用 

-webkit-animation是一個複合屬性， 

-webkit-animation: name duration timing-function delay iteration_count direction; 

包括如下幾個屬性 

 （1） -webkit-animation-name 這個屬性的使用必須結合@-webkit-keyframes一塊兒使用 

 eg: @-webkit-keyframes fontchange{ 

 0%{font-size:10px;} 

 30%{font-size:15px;} 

 100%{font-siez:12px;} 

 } 百分比的意思就是duration的百分比，若是沒有設置duration的話，則表示爲無窮大 div{ -webkit-animation-name:fontchange;} 

（2）-webkit-animation-duration 表示動畫持續的時間 

（3）-webkit-animation-timing-function 表示動畫使用的時間曲線 【語法】：

 -webkit-animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out 

（4）-webkit-animation-delay 表示開始動畫以前的延時 【語法】 -webkit-animation-delay: delay_time; 

（5）-webkit-animation-iteration-count 表示動畫要重複幾回，infinite爲無限次（實現關鍵） 

 【語法】-webkit-animation-iteration-count: times_number;

（6） -webkit-animation-direction 

表示動畫的方向 【語法】-webkit-animation-direction: normal(默認) | alternate normal 方向始終向前 alternate 當重複次數爲偶數時方向向前，奇數時方向相反

綜合上面的解釋，最終CSS代碼以下：

So Enjoy It!!

下載