神魂顛倒論壇logo

icon
首頁網頁 / 程式應用區Front-end網頁前端討論 → 利用現成的CSS3 Animation 屬性來創造一些小驚喜

Silverlight 5 | 雷射溶脂 | 瘦小腹 | 植髮 | 眼袋 | 玻尿酸 | 電波拉皮 | Flash | 購物車 | Flash Player 11.2 | 豐胸 |

下一主題 上一主題


利用現成的CSS3 Animation 屬性來創造一些小驚喜


利用現成的CSS3 Animation 屬性來創造一些小驚喜 簡版






UNITiD 的「Why use micro-animations in your design?」中說明了使用微動畫的好處

包括了:

  • 更直覺的介面
  • 互動、介面變化的前因後果更清楚
  • 吸引使用者注意
  • 暗示元件的「可操作性」
  • 在觸控裝置上取代「hover」滑鼠移飄過效果
  • 給予使用者正面回饋

看起來適當應用肯定是有好處的,但凡事太過就可能會有反效果了

這種效果以往在PC上稱霸的Flash可以說明人們有多愛這種互動

如今在手機上倒是可以利用現成的CSS3 Animation 屬性來創造一些小驚喜,正因為手機瀏覽器都支援CSS3的Animation 屬性,所以這種方法負擔最小,少少付出就可以立即得到回饋。

PC上也是可以的,除了部分不支援CSS3 的瀏覽器之外,大家可以到 Can I use 網站輸入CSS Animation 就可得知,這個網站很好用的,該記下來才是。

Can I use 查詢瀏覽器支援度網站


圖片:1484638630053.jpg

也可以直接到 html5test.com 網站直接測試目前使用的瀏覽器支援度與分數

所以看得出來,IE11才支援,Opera 則全部GG,所以也未必如我所說的那麼樂觀,手機上還是會有不少GG的情況,例如 Android 內建的 Webview 若版本太舊就可能支援有問題。

好了,如果決定要用,就可以自己改CSS了,在 animation 相關屬性的部份,可以使用的 CSS 屬性有:

animation-delay 網頁元素被載入後到開始播放動畫之間的等待時間。
animation-direction 在動畫播放完之後,是否以相反方向的方式播放,或從頭開始(原方向)重複播放。
animation-duration 設定整個動畫播放一次的時間長度。
animation-iteration-count 設定動畫播放的次數,若要不斷重複播放,則可設為 infinite。
animation-name 設定 @keyframes at-rule 所使用的動畫名稱。
animation-play-state 本屬性可用來暫停或繼續動畫播放。
animation-timing-function 透過加速曲線(acceleration curves),設定動畫播放的速度。
animation-fill-mode 設定動畫元素在播放前與播放後,如何套用 CSS 的樣式。

有興趣大家可以去查一下詳細的 animation 相關屬性,但若需求只是一些些簡單的動態,也可以考慮 Daniel Eden開發的一套 Animate.css 的CSS3 Animation 預設集大全,內含 75 個不同的動畫效果,我們只要透過設定 Class 的方式使用即可,很方便的。

當然,還是要稍微知道一下用的是 CSS3 Animation那些屬性和相關語法,這樣我們才知道那個瀏覽器能用,而有時要自訂效果時也會更加清楚一些。

Animate.css 使用方式很簡單,各種可用的效果在官網就可以測試了,css檔也可以直接從官網下載



圖片:1484639044142.jpg


支援的效果列表

animate.css gallery


使用起來很簡單,只要加上Class的名稱即可,當然,首頁要引入 Animate.css 樣式檔,可載入線上路徑,或各位自行下載後的路徑

如:
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>


接著在Class加入即可
<h2 class="animated infinite bounce"> Hello World! </h2>


其中「animated」代表的是動畫,「infinite」代表了無限循環,而「bounce」則代表了「彈跳」這個效果, 只要根據上圖的效果更換即可得到不同的動畫效果,例如「flash」「pulse」等。

是不是很方便?

如前所述,我們也可以利用CSS的屬性來調整動畫次數、時間長度等等,例如

<h2 class="animated bounce" style="animation-duration: 5s;animation-iteration-count:3">
Hello World!
</h2>


就代表 每次 5 秒的速度重覆彈跳 3 次,是不是很容易?

也可以看看影片喔








購物車 | 回到頂部
Icon
網路的事情,讓網路解決

[ 逛網路就像是在探險 ]

    神 魂 顛 倒 T W G

http://bbs.flash2u.com.tw

http://tw.myblog.yahoo.com/flash2u-twg

http://flash-silverlight.blogspot.com/

http://flash2u.spaces.live.com/?_c02_owner=1
下一主題 上一主題