html 測試 上入 下出

html 測試 單入 單出

html 測試 左右 各一 測試

html 測試 左入右出

尾部連結 hbbb(xx)

onload onscroll onresize

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 動畫的跑動,也可以控制動畫的顏色,大小 改變。
00

00

沒有留言:

張貼留言