html 測試 上入 下出

html 測試 左右 各一 測試

html 測試 單入 單出

html 測試 左入右出

class="ot"









尾部連結 hbbb(xx)

2018年3月5日 星期一

CSS3 animation 動畫屬性

CSS animation 動畫屬性


CSS3 animation 動畫屬性是 CSS 用來設計網頁動畫的標準屬性,CSS3 animation 效果設定有許多種不同的屬性,用來控制動畫的移動方式、顏色變化、移動方向、顏色變化 ... 等效果,有非常的強大功能,CSS3 animation 屬性甚至可以達到傳統需要用 JavaScript 或 Flash 設計的動畫效果,優點是完全不需要 JavaScript 就可以設計出不太複雜的動畫,而且更具有消耗資源的優勢,如果要用 JavaScript 設計出相同效果的動畫,通常需要較為複雜的程式碼,也比較吃資源,CSS3 animation 把動畫生成的工作交給瀏覽器處理,對於動畫優化也有所幫助。

使用 animation 動畫屬性只需要設定好 animation 的屬性後,以關鍵影格 keyframes 就可以讓動畫跑起來,但是各家瀏覽器的支援程度還不一致,所以在 CSS 的語法中,會需要加入特別為瀏覽器所寫的字首(prefix)如 。 -webkit-animation -moz-animation -o-animation -ms-animation。

基本設定一:CSS3 animation 動畫屬性語法 animation: name duration timing-function delay iteration-count direction;
屬性說明
animation-name定義動畫的關鍵影格 @keyframes 名稱。
animation-duration定義動畫執行一次的時間,可以秒或毫秒為單位。
animation-timing-function定義動畫執行的速度曲線,例如線性 linear 或低速開始。
animation-delay定義動畫準備完成至開始動作的時間,可以秒為單位,若為 0s 表示不延遲。
animation-iteration-count定義動畫重覆執行次數,若要無限次執行可使用 infinite。
animation-direction定義動畫執行完一次是否需要反向執行,若要反向執行可使用 alternate。


關鍵影格 keyframes 的設定可以說是 CSS3 animation 動畫效果的關鍵,要動畫就跑起來,雖要設定關鍵影格,要設定關鍵影格有兩個重點,分別是(from)從哪邊開始跑以及(to)跑到哪裡結束,關鍵影格是透過 percentage 來判斷動畫啟動的時間點以及結束的時間點,0% 代表的是動畫起點,100% 則代表動畫結束點,如 10% 20% ....90% 100% 用 from 與 to 來設定,這部分在範例中也都會看到。關鍵影格描述的是動畫建變過程的外觀,也就是說,除了可以利用關鍵影格來控制 animation 動畫的跑動,也可以控制動畫的顏色,大小 改變。

沒有留言:

張貼留言