2015年12月17日 星期四

[筆記] CSS動畫Animation --- @keyframes


在學習CSS動畫的過程中,不能不提@keyframes這個屬性,讓我們來看一下這個屬性可以怎麼樣使用吧!

基礎範例



我們先來看一下最簡單的範例,製作出來的效果如下:


我們可以看到,這個方塊會有變色的效果,讓我們來看一下這段基礎的程式碼是什麼:

HTML的部分非常簡單,就是用一個div。


CSS的部分我們先設定該div的樣式,然後裡面會包含要執行動畫的名稱animation-name和執行動畫的時間animation-duration,這兩個部分都可以根據自己的需要設定。

接著就要來設定@keyframes的內容,在@keyframes後面要先輸入剛剛在div當中所寫的animation-name,然後就可以在"{ }"內設定要執行動畫的效果。

這裡用的fromto,表示在4s的期間內,從一開始(0%)到最後(100%)動畫的變化。


如果你希望動畫中間是有很多不同時間點的變化,可以不用from和to,而是直接使用百分比,像是這樣使用百分比也可以:


在上面的程式碼中,我們在div的地方同時加上position: relative,同時製造出移動的動畫效果!結果如下:


看看更多和animation有關的屬性



在上面的例子中,我們在div裡面使用了animation-nameanimation-duration這兩個屬性,而animation其實還包含其他屬性可以使用,我們來看看!

animation-delay:這個動畫會延遲幾秒後才進行,例如,animation-delay: 5s,表示這個動畫會延遲5表後才執行。

animation-iteration-count:這個動畫會重複執行幾次,例如,animation-iteration-count: 4,表示這個動畫會重複執行4次後停止。如果我們希望這個動畫不斷循環不要停止的話,我們可以用infinite這個關鍵字,animation-iteration-count: infinite,表示這個動畫會無限次循環下去。

animation-direction:這個屬性可以指定動畫進行的方向,例如,上面的範例正方形是順時針移動,預設的值是normal,所以動畫就會隨順時針進行;如果你希望動畫是逆時針(反著時間順序)進行,則可以輸入reverse;另外,還有一個比較特別的值是alternate,當奇數次撥放時會照原本的時序,偶數次撥放時則會倒著時序撥放。

animation-timing-function:這個屬性是用來控制動畫執行過程中的速度變化,包含
ease,這是預設值,動畫一開始慢慢的,接著會漸漸加速,結束的時候再慢下來。
linear,動畫從開始到結束的過程都是一樣的速度。
ease-in,動畫開始的速度較慢。
ease-out,動畫結束的速度較慢。
ease-in-out,動畫的開始和結束時的速度較慢。
cubic-bezier(n,n,n,n),自行定義動畫的速度。
各個不同的動畫速度效果可以參考W3Schools的這兩個範例:範例一範例二

animation簡寫



從上面的說明我們可以知道,完整的animation屬性還算不少:


如同其他css的屬性(例如,background),animation也有縮寫的形式,寫法如下:


參考資料


W3School:CSS3 Animations
Share:

0 意見:

張貼留言