程式狂想筆記

一個攻城師奮鬥史

0%

[CSS] CSS3 Animations動畫特效

最近我同學問我這個背景移動特效要怎麼用
他以為是JQuery寫出來的
結果我找了老半天,原來是CSS3

animation:160s linear 0s normal none infinite animatedBackground

1
2
3
name {
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

※簡單筆記
name-> @keyframe名稱
duration -> 設定幾秒內跑完
timing-function -> 開始到結束的速度
delay -> 動畫開始前延遲幾秒
iteration-count -> 重複執行幾次
direction -> 執行完動畫後,接下來的動作模式
fill-mode -> 動畫跑完後,該此物件擺設位置
play-state -> 動畫狀態暫停

@keyframes

1
2
3
4
5
6
7
8
9
10
11
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}

/* Standard syntax */
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}

/* Standard syntax */
@keyframes mymove {
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}

參考來源:
http://yesdesigning.com/forum-63-1.html(特效)
http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp