animate.css

使用 animate.css 製作微動畫提升作品質感

趙嘉恩 2018/04/20 23:46:46
1469

使用 animate.css 製作微動畫提升作品質感


簡介

在製作網頁時一點的動態效果,可以讓網頁增加互動性,但製作動畫的過程繁瑣,今天介紹的是套用Animate.css,讓我 們輕鬆做出75種不同的動態效果。

作者

趙嘉恩


使用 animate.css 製作微動畫提升作品質感

在製作網頁時一點的動態效果,可以讓網頁增加互動性,但製作動畫的過程繁瑣,今天介紹的是套用Animate.css,讓我 們輕鬆做出75種不同的動態效果。

2018/04/20

1.       前言

20在製作網頁時一點的動態效果,可以讓網頁增加互動性,但製作動畫的過程繁瑣,今天介紹的是套用Animate.css,讓我們輕鬆做出75種不同的動態效果。

2.     目的

使用動態css,讓網頁有加分的效果。

 

3.     實作練習

Animate.css Daniel Eden 開發,即是一個 CSS3 Animation 預設集大全,內含 75 個不同的動畫效果,我們只要透過設定 Class 的方式使用即可,例如:

 

 

上例為一常見的網頁標題,要讓他跳起來,我們只需要兩個動作,首先,引入 Animate.css 樣式檔:

接著,為 h2 加上三個 CSS 類別,

就這樣,你可以在自己的電腦上試試看,直接將上述兩行存成 index.html

放在電腦桌面後用滑鼠雙擊打開,你會看到類似這樣得效果:

 

當我們加入 CSS 類別時:

·       animated」代表的是動畫

·       infinite」代表了無限循環

·       bounce」則代表了「彈跳」

 

果你想要不一樣的動畫類型,只要將第三個類別「bounce」改為其它的類別就可以了,animate.css 所提供的內建類別包含了 75 種,數量相當多,若你想知道完整的列表可以連至 animate.css 的專案庫參考。

 

使用在 SVG 標籤上

由於做網頁視覺化時我們常會用到 SVG 系列的標籤要注意的是我們是否使用到與動畫相衝突的 transform 屬性;若我們需要使用 transform 屬性來製作視覺化,建議可以在外面包一層 <g> 即可使用。

 

客製化

除了利用「infinite」類別控制重覆次數,也可以利用 CSS3 的屬性來調整動畫的次數與速度,主要牽涉到兩個屬性:

·       animation-duration – 控制單次動畫的時間長度

·       animation-iteration-count – 控制動畫重播的次數

具體來寫,大概會像是下面這段程式碼:
 上面這個寫法會讓 Hello World! 以每次 5 秒的速度重覆彈跳 3 次。我們可以再進一步將他加到樣式檔中重覆使用,也可以搭配 animate.css 提供的 custom build 機制將會用到的動畫獨立產生新的樣式檔。
 接下來就嘗試看看使用使用flash出圓球的漸變效果
 
  先用css做出一個圓球後class中加上以每次 5 秒的速度重覆漸變 3
 
 

最後漸後所產生的效果

 

4.       參考來源

http://blog.infographics.tw/2016/11/animate-css/

https://daneden.github.io/animate.css/

趙嘉恩