CSS Animation 如何用CSS來製作動畫的效果? (下集)

今天要繼續跟大家介紹如何使用 Animation 的屬性,沒有看過上集的你 請點我看上集 ,那麼有看過上集的人我今天就要繼續介紹囉!

▲ 介紹內容
1. animation 可以製作什麼樣的效果 ? (上集介紹)
2. 如何使用 animation ?
– transform 說明 (上集介紹)
– animation 使用方式 (上集介紹)
– animation 屬性介紹 (本集介紹)
3. 舉例和網頁資源參考(本集介紹)

▲ Animation 屬性介紹
1. animation-name
解說:宣告動畫的名字。
使用方式:
animation-name:name;


依照自己取的名字把名字填入即可。

2. animation-duration
解說:此動畫需要花費的時間。
使用方式:
animation-duration:time;
time以秒數為單位。

提醒:這個是此動畫放映需要多少的時間完成,而不是這個動畫要播放多久喔~播放多久會看你的動畫重複幾次。

3. animation-iteration-count
解說:此動畫播放的次數。
使用方式:
animation-iteration-count: n or infinite;
n 代表次數,填1就代表播放1次,依此類推。
填 infinite 即代表無限循環播放。

有了以上三個屬性,animation 就可以正常運作了,以上三個屬性在使用 animation 的時候一定要派上用場R~

4. animation-iteration-count
解說:這個屬性是動畫的效果,類似淡入淡出的感覺,像是動畫運行的曲線讓動畫看起來不那麼生硬。
使用方式:
animation-timing-function: value;
可用屬性有
a. linear:等速進行。
b. ease:由低到快速進行。
c. ease-in:由低速開始。
d. ease-out:由低速結束。
e. ease-in-out:由低速開始和結束。
範例參考

4. animation-delay
解說:動畫開始前的延遲。
使用方式:
animation-delay: time;
time 以秒數為主,想要 0.5s 就代表半秒。

5. animation-direction
解說:動畫的反向播放。
按我看例子
使用方式:
animation-direction: normal|alternate;
normal:正常播放。結束後,會跳回原位子。
alternate:反向播放。播放完以後會倒轉回去原來的位子。

以上就是 CSS Anmiations 的屬性和他的使用方式,接下來要跟大家介紹他的應用和一些蠻厲害的例子。有興趣可以自己研究一下他們開放的原始碼,虛心學習XD

▲ 舉例和網頁資源參考
範例1
這個範例就是典型的利用CSS來製作動畫
範例2
如果對 js 略有研究,也可以達成這樣 scroll anim 的效果效果。
範例3
一些 loading 的效果,也都是使用 animation 製作的。
範例4
還不錯的視覺效果,可以拿來做網頁的時候當作一個創意的參考。
Animate.css
這個是一個套件,把CSS動畫寫好只要用他規定的方式就可以使用了。
steps() 在animation中的用法

以上就是這次的 CSS Animation 教學,網頁的技術可以說很淺也可以說很深,但是我覺得是易上手不容易學得精,只能多多下功夫慢慢累積經驗才會有更好的方法和以及觀念知道如何製作一個網站。如果喜歡製作網頁就不斷地學習吧~每天都是新的自己去了解現在的網頁趨勢和新技術也是蠻有趣的一件事情喔!

Leave a Comment