- 摩刻部落 - https://www.moke.tw/wordpress -

CSS3與濾境(12)-影格動畫

所謂的影片或是動畫,其實是由很多靜態的影像連續播放而成。
「影格」就是指我們在編輯Flash或是影片時,時間軸上一格一格的格子。CSS3提供了一些語法,讓我們除了使用GIF、Flash等動外外,也可以使用CSS做簡易的影格動畫。影格動畫的設定由 @keyframes 來完成,再透過 animation 屬性把動畫與物件連結。目前 IE 和 Opera 瀏覽器都不支援。

屬性名稱

@keyframes [1](影格動畫)
animation [2](動畫設定):animation-name [3](動畫名稱)、animation-duration [4](動畫時間)、animation-timing-function [5](動畫速度)、animation-delay [6](動畫延遲)、animation-iteration-count [7](播放次數)、animation-direction [8](動畫週期)、animation-play-state [9](播放狀態)

@keyframes
說明:建立與設定影格動畫。範例結果請參考這裡 [10]

屬性值:

【範例】

@keyframes MyMove {		/* 不支援IE與Opera瀏覽器 */
	from {left:0px;}
	to {left:200px;}
}
@-moz-keyframes MyMove {	/* Firefox 使用的語法 */
	from {left:0px;}
	to {left:200px;}
}
@-webkit-keyframes MyMove {	/* Chrome、Safari 使用的語法 */
	from {left:0px;}
	to {left:200px;}
}

#box5 {
	width:100px;
	height:100px;
	background:red;
	position:relative;

	animation:MyMove 5s;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation:MyMove 5s;	/* Firefox 使用的語法 */
	-webkit-animation:MyMove 5s;	/* Chrome、Safari 使用的語法 */
}
回到【屬性名稱】 [11]

animation
說明:指定套用的動畫名稱、動畫時間、速度、延遲、播放次數、週期。範例結果請參考這裡 [10]

屬性值:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

【範例】

#box5 {
	width:100px;
	height:100px;
	background:red;
	position:relative;

	animation:MyMove 5s;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation:MyMove 5s;	/* Firefox 使用的語法 */
	-webkit-animation:MyMove 5s;	/* Chrome、Safari 使用的語法 */
}
回到【屬性名稱】 [11]

animation-delay
說明:指定影格動畫的延遲時間,表示當事件產生時,要停留幾秒才開始進行動畫。範例結果請參考這裡 [10]

屬性值:(時間,預設值0,單位s秒或ms毫秒)

【範例】

#box7 {
	width:100px;
	height:100px;
	background:purple;
	position:relative;

	animation:MyMove 5s;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation:MyMove 5s;	/* Firefox 使用的語法 */
	-webkit-animation:MyMove 5s;	/* Chrome、Safari 使用的語法 */

	animation-delay:5s;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation-delay:5s;	/* Firefox 使用的語法 */
	-webkit-animation-delay:5s;	/* Chrome、Safari 使用的語法 */
}
回到【屬性名稱】 [11]

animation-direction
說明:指定影格動畫的播放週期,播放完後是否反向播放。範例結果請參考這裡 [10]

屬性值:normal(預設值,直線播放)、alternate(來回播放)

【範例】

#box8 {
	width:100px;
	height:100px;
	background:brown;
	position:relative;

	animation:MyMove 5s;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation:MyMove 5s;	/* Firefox 使用的語法 */
	-webkit-animation:MyMove 5s;	/* Chrome、Safari 使用的語法 */

	animation-iteration-count:infinite;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation-iteration-count:infinite;	/* Firefox 使用的語法 */
	-webkit-animation-iteration-count:infinite;	/* Chrome、Safari 使用的語法 */

	animation-direction:alternate;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation-direction:alternate;	/* Firefox 使用的語法 */
	-webkit-animation-direction:alternate;	/* Chrome、Safari 使用的語法 */
}
回到【屬性名稱】 [11]

animation-duration
說明:指定影格動畫進行的時間,表示動畫開始到結束所花費的時間。為0時表示不進行動畫。此屬性不提供範例結果,請參照其它關聯屬性。

屬性值:(時間,預設值0,單位s秒或ms毫秒)

【範例】

#box {
	animation-duration: 5s;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation-duration: 5s;	/* Firefox 使用的語法 */
	-webkit-animation-duration: 5s;	/* Chrome、Safari 使用的語法 */
}
回到【屬性名稱】 [11]

animation-iteration-count
說明:指定影格動畫的播放次數。範例結果請參考這裡 [10]

屬性值:(數值)、infinite(無限次)

【範例】

#box8 {
	width:100px;
	height:100px;
	background:brown;
	position:relative;

	animation:MyMove 5s;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation:MyMove 5s;	/* Firefox 使用的語法 */
	-webkit-animation:MyMove 5s;	/* Chrome、Safari 使用的語法 */

	animation-iteration-count:infinite;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation-iteration-count:infinite;	/* Firefox 使用的語法 */
	-webkit-animation-iteration-count:infinite;	/* Chrome、Safari 使用的語法 */

	animation-direction:alternate;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation-direction:alternate;	/* Firefox 使用的語法 */
	-webkit-animation-direction:alternate;	/* Chrome、Safari 使用的語法 */
}
回到【屬性名稱】 [11]

animation-name
說明:指定套用的動畫名稱,英文大小寫示為不同字。此屬性不提供範例結果,請參照其它關聯屬性。

屬性值:(文字)、none(無動畫)

【範例】

#box {
	animation-name:MyMove;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation-name:MyMove;	/* Firefox 使用的語法 */
	-webkit-animation-name:MyMove;	/* Chrome、Safari 使用的語法 */
}
回到【屬性名稱】 [11]

animation-play-state
說明:指定動畫的播放狀態。範例結果請參考這裡 [10]

屬性值:running(預設值,播放動畫)、paused(暫停動畫)

【範例】

#box9 {
	width:100px;
	height:100px;
	background:black;
	position:relative;

	animation:MyMove 5s;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation:MyMove 5s;	/* Firefox 使用的語法 */
	-webkit-animation:MyMove 5s;	/* Chrome、Safari 使用的語法 */

	animation-play-state:paused;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation-play-state:paused;	/* Firefox 使用的語法 */
	-webkit-animation-play-state:paused;	/* Chrome、Safari 使用的語法 */
}
回到【屬性名稱】 [11]

animation-timing-function
說明:在影格動畫進行的期間內,細部指定其動畫的速度。範例結果請參考這裡 [10]

屬性值:

【範例】

#box6 {
	width:100px;
	height:100px;
	background:red;
	position:relative;

	animation:MyMove 5s;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation:MyMove 5s;	/* Firefox 使用的語法 */
	-webkit-animation:MyMove 5s;	/* Chrome、Safari 使用的語法 */

	animation-timing-function:ease-out;		/* 不支援IE與Opera瀏覽器 */
	-moz-animation-timing-function:ease-out;	/* Firefox 使用的語法 */
	-webkit-animation-timing-function:ease-out;	/* Chrome、Safari 使用的語法 */
}
回到【屬性名稱】 [11]