css Animation初體驗

目前有愈來愈多的網站都使用animation，不管他們是用GIF，SVG，WebGL，視頻背景或者其餘形式展現。適當地使用動畫會讓網站更生動，互動性更好，爲用戶增長一個額外的反饋和體驗層。

在本教程中我會向你介紹CSS動畫；隨着瀏覽器支持性的提升已經變得愈來愈流行了，css動畫在作一些事情上有很高的性能。在涵蓋了基礎知識後，咱們將建一個快速的例子：矩形變成圓形的動畫。

演示看這裏

 

@keyframes和動畫 介紹

css動畫的主要組件：@keyframes，建立動畫的css規則。把@keyframes想象爲動畫步驟的時間軸。在@keyframes裏，你能夠定義這些步驟，每一個都有不一樣的樣式聲明。

第二步，讓css動畫能運行，須要爲@keyframes綁定一個選擇符。基於這些步驟，@keyframes聲明的全部代碼都會變解析而後對新的樣式進行初始化。

 

The @keyframes

這裏咱們將會設置動畫的步驟，@keyframes的屬性以下：

• 選擇符的名字（這個例子中是tutsFade） .
• 步驟：0%-100%;  from (equal to 0%) and to (equal to 100%).
• CSS 樣式: 每一個階段要應用到的樣式.

例子：

@keyframes tutsFade {

   0% {

     opacity: 1 ;

   }

   100% {

     opacity: 0 ;

   }

}

或者：

@keyframes tutsFade {

   from {

     opacity: 1 ;

   }

   to {

     opacity: 0 ;

   }

}

簡寫：

@keyframes tutsFade {

   to {

     opacity: 0 ;

   }

}

 

上面的代碼爲元素應用一個不透明度的過渡，從opacity: 1到opacity: 0.上面三種方法實現的效果是同樣的。

 

The Animation

animation的屬性：

• animation-name: @keyframes名稱 (此例爲 tutsFade).
• animation-duration:時間間隔，動畫從開始到結束的總長.
• animation-timing-function: 設置動畫速度 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
• animation-delay:動畫開始前的延遲.
• animation-iteration-count: 在動畫期間它會遍歷多少次.
• animation-direction: 改變循環的方向，從開始到結束，仍是從結束到開始，或者二者都.
• animation-fill-mode: 指定動畫結束時元素應用的樣式 ( none | forwards | backwards | both ).

例如：

.element {

   animation-name: tutsFade;

   animation-duration: 4 s;

   animation-delay: 1 s;

   animation-iteration-count: infinite;

   animation-timing-function: linear;

   animation- direction : alternate;

}

簡寫爲：

.element {

   animation: tutsFade 4 s 1 s infinite linear alternate;

}

上面的代碼會建立一個閃爍效果，1秒的動畫延遲，4秒的動畫間隔，交替的方向和無限線性循環迭代.

增長瀏覽器前綴：

在工做中，咱們須要使用瀏覽器指定前綴確保最好的瀏覽器支持。標準前綴應用：

• Chrome & Safari: -webkit-
• Firefox: -moz-
• Opera: -o-
• Internet Explorer: -ms-

動畫屬性使用了瀏覽器前綴的形式：

.element {

     -webkit-animation: tutsFade 4 s 1 s infinite linear alternate;

     -moz-animation: tutsFade 4 s 1 s infinite linear alternate;

     -ms-animation: tutsFade 4 s 1 s infinite linear alternate;

     -o-animation: tutsFade 4 s 1 s infinite linear alternate;

     animation: tutsFade 4 s 1 s infinite linear alternate;

}

@keyframes的前綴使用：

@-webkit-keyframes tutsFade { /* your style */ }

@-moz-keyframes tutsFade { /* your style */ }

@-ms-keyframes tutsFade { /* your style */ }

@-o-keyframes tutsFade { /* your style */ }

@keyframes tutsFade { /* your style */ }

 

更多瀏覽器前綴： http://css3please.com/

 

多動畫

使用逗號分割添加多動畫。爲tutsFade 元素添加回轉，咱們要聲明一個額外的@keyframes而後綁定到元素上：

.element {

   animation: tutsFade 4 s 1 s infinite linear alternate, tutsRotate 4 s 1 s infinite linear alternate;

}

@keyframes tutsFade {

   to {

     opacity: 0 ;

   }

}

@keyframes tutsRotate {

   to {

     transform: rotate( 180 deg);

   }

}

 

------------------------------------分割線--------------------------------------------------------------------

矩形變圓形實例

這個例子中總共有五個步驟，每一個步驟將爲元素定義一個圓角，一個迴轉和不一樣的背景色，下面是實現的步驟和代碼。

基本元素

首先建立一個標記，動畫的元素。甚至不用class，僅僅只用一個div:

<div></div>

而後運用元素選擇爲div添加樣式：

div {

   width : 200px ;

   height : 200px ;

   background-color : coral;

}

聲明Keyframes

定義一個 @keyframes,命名爲square-to-circle，五個步驟以下：

@keyframes square-to-circle {

   0% {}

   25% {}

   50% {}

   75% {}

   100% {}

}

須要爲每一個步驟定義一些樣式，開始爲每一個矩形角定義圓角：

@-webkit-keyframes square-to- circle {

   0%  {

     border-radius: 0 0 0 0 ;

   }

   25%  {

     border-radius: 50% 0 0 0 ;

   }

   50%  {

     border-radius: 50% 50% 0 0 ;

   }

   75%  {

     border-radius: 50% 50% 50% 0 ;

   }

   100% {

     border-radius: 50% ;

   }

}

而後爲每一個步驟定義不一樣的背景色：

@keyframes square-to- circle {

   0%  {

     border-radius: 0 0 0 0 ;

     background :coral;

   }

   25%  {

     border-radius: 50% 0 0 0 ;

     background :darksalmon;

   }

   50%  {

     border-radius: 50% 50% 0 0 ;

     background :indianred;

   }

   75%  {

     border-radius: 50% 50% 50% 0 ;

     background :lightcoral;

   }

   100% { 

     border-radius: 50% ;

     background :darksalmon;

   }

}

旋轉DIV添加一點視覺效果：

@keyframes square-to- circle {

   0%  {

     border-radius: 0 0 0 0 ;

     background :coral;

     transform:rotate( 0 deg);

   }

   25%  {

     border-radius: 50% 0 0 0 ;

     background :darksalmon;

     transform:rotate( 45 deg);

   }

   50%  {

     border-radius: 50% 50% 0 0 ;

     background :indianred;

     transform:rotate( 90 deg);

   }

   75%  {

     border-radius: 50% 50% 50% 0 ;

     background :lightcoral;

     transform:rotate( 135 deg);

   }

   100% { 

     border-radius: 50% ;

     background :darksalmon;

     transform:rotate( 180 deg);

   }

}

應用動畫

定義了square-to-circle動畫後，須要將它應用到div上：

div {

   width : 200px ;

   height : 200px ;

   background-color : coral;

   animation: square-to- circle 2 s 1 s infinite alternate; 

}

上面使用了簡寫的動畫屬性，它們的狀態是：

• 動畫名：square-to-circle.
• 動畫間隔：2s.
• 動畫延遲：1s.
• 動畫循環次數是無限的.
• 動畫運行方向是交替的, 首先從開始到結束，而後返回到最開始，而後到結束，循環往復。

使用Timing-Function

能夠爲animation添加的最後一個屬性是animation-timing-function.定義移動的速度，加速或者減速。這個函數能夠是一個很是詳細的值，尷尬的手動計算，可是有不少免費的網站爲timing-function提供資源和在線定製。

例如：CSS Easing Animation Tool，如今來計算咱們的定時功能。

運用立方貝塞爾函數爲square-to-circle動畫添加伸縮效果。

div {

   width : 200px ;

   height : 200px ;

   background-color : coral;

   animation: square-to- circle 2 s 1 s infinite cubic-bezier( 1 ,. 015 ,. 295 , 1.225 ) alternate; 

}

最終的沒有使用瀏覽器前綴(  -webkit- ,  -moz-,  -ms-,  -o- ) 的代碼以下：

div {

   width : 200px ;

   height : 200px ;

   background-color : coral;

   animation: square-to- circle 2 s . 5 s infinite cubic-bezier( 1 ,. 015 ,. 295 , 1.225 ) alternate;

}

 

@keyframes square-to- circle {

   0%  {

     border-radius: 0 0 0 0 ;

     background :coral;

     transform:rotate( 0 deg);

   }

   25%  {

     border-radius: 50% 0 0 0 ;

     background :darksalmon;

     transform:rotate( 45 deg);

   }

   50%  {

     border-radius: 50% 50% 0 0 ;

     background :indianred;

     transform:rotate( 90 deg);

   }

   75%  {

     border-radius: 50% 50% 50% 0 ;

     background :lightcoral;

     transform:rotate( 135 deg);

   }

   100% { 

     border-radius: 50% ;

     background :darksalmon;

     transform:rotate( 180 deg);

   }

}

 

最後的事情

在現代瀏覽器中一切運行正常，可是在Firefox中渲染對象有點不足，邊緣會出現鋸齒：

幸運的是，有一個解決方法。在div上添加透明的outline以後Firefox就會完美地渲染！

outline: 1px solid transparent;