2013年12月4日 星期三

CSS 3 動畫- animation

CSS3 Animations

用 css 3 寫動畫還滿好玩的,剛好有需求就來練習一下。

語法大概會類似這樣
  1. animation: myfirst 5s linear 2s infinite alternate;  

animation 後接一些設定動畫的參數,第一個是動畫的名稱,這個就很像一般程式的 function 了,然後接著的是 animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-play-state 這些參數,可以參考 W3C 的說明。

然後要寫一個執行動畫的設定。
  1. @keyframes myfirst   
  2. {   
  3. 0%   {backgroundred; left:0px; top:0px;}   
  4. 25%  {background: yellow; left:200px; top:0px;}   
  5. 50%  {backgroundblue; left:200px; top:200px;}   
  6. 75%  {backgroundgreen; left:0px; top:200px;}   
  7. 100% {backgroundred; left:0px; top:0px;}   
  8. }  

大概就是指定時間的相對百分比,動畫的絕對時間長短則是在前面的 animation-timing-function 設定,再在各個時間上設定 CSS 就好了。

Demo

另外記錄一下這個 sprite 動畫的寫法,我覺得很酷。

反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...