前端小知識:CSS動畫的使用方式

前端的CSS動畫一直沒有去使用過,今天剛好有個小機會需要利用CSS的動畫功能,因此就來小研究一下語法後,將其記錄在這裡。

利用CSS動畫,做出搖晃的鈴鐺

其實也是利用關鍵影格的概念來進行,這個以前有用過Flash甚至是更早以前的Director,都是用這個概念在運作,只不過CSS基於先天的限制,因此只能採用完整播放一次動畫的百分比來進行關鍵點的設定,若有這方面觀念的朋友,應該都可以馬上上手。

設定CSS

<style>
	//定義關鍵影格當下應進行的屬性,或應該到位的位址
	@keyframes bellShake {
			0%	{transform: rotate(-30deg);}
			//如果你喜歡的話,可以在這之中的關鍵點(例如50%),繼續制定你的相關屬性
		100%	{transform: rotate(30deg);}
	}
	//定義類別
	.shake {
  	animation-name: bellShake;	//必須連動到關鍵影格的名稱
		animation-duration: 1s;	//動畫期間秒數
		animation-direction: alternate;	//動畫方向(這裡設定成完成後逆運動回來)
		animation-iteration-count: infinite;	//動畫重複次數
	}
</style>

套用端語法如下,基本上就是把「shake」這個CSS類別名稱加入即可。我這個網站比較偷懶,是採用Bootstrap內建的字型方案,如果你是採用FontAwesome的解決方案,一樣是適用的。

	<span class="glyphicon glyphicon-bell shake"></span>

運行範例如下:

搖落去!搖落去!

CSS Animate NonjQuery Bootstrap FontAwesome Bell Shake Rotate