css3 animation動畫使用

css3 animation動畫

本篇僅介紹 animation 的文法，相容性；以及動畫使用例子，便于入門；在底部有提供 動畫 深度剖析的部落格連結。

animation 文法

animation 有八個屬性：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
           

• animation-name 指定要綁定到選擇器的關鍵幀的名稱，即 @keyframes 後面名稱可以随意；
• animation-duration 動畫指定需要多少秒或毫秒完成
• animation-timing-function 設定動畫将如何完成一個周期
• animation-delay 設定動畫在啟動前的延遲間隔
• animation-iteration-count 定義動畫的播放次數。
• animation-direction 指定是否應該輪流反向播放動畫。
• animation-fill-mode 規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
• animation-play-state 指定動畫是否正在運作或已暫停。

animation-timing-function 的值：

linear	動畫從頭到尾的速度是相同的。
ease	預設。動畫以低速開始，然後加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
           

animation相容性

Internet Explorer 10、Firefox 以及 Opera 支援 @keyframes 規則和 animation 屬性。

Chrome 和 Safari 需要字首 -webkit-。

注釋：Internet Explorer 9，以及更早的版本，不支援 @keyframe 規則或 animation 屬性。

animation 使用舉例 —— 相容性寫法

#st-controle p{
	-webkit-animation:moveUp 1s ease-in-out 0.2s backwards;
	-moz-animation:moveUp 1s ease-in-out 0.2s backwards;
	-o-animation:moveUp 1s ease-in-out 0.2s backwards;
	-ms-animation:moveUp 1s ease-in-out 0.2s backwards;
	animation:moveUp 1s ease-in-out 0.2s backwards;
}

@-webkit-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-moz-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-o-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}

@-ms-keyframes moveUp{
	0%{
		-webkit-transform:translateY(40px);
		opacity:0;
	}
	100%{
		-webkit-transform:translateY(0px);
		opacity:1;
	}
}
           

參考連結

頁面使用純 css 實作動畫切換執行個體：

https://github.com/Yashona/cssStudy

Animation 入門詳解（三）

https://blog.csdn.net/u013243347/article/details/79976352

總結CSS3新特性(Animation篇)

https://www.cnblogs.com/jiasm/p/4699806.html