第十九章 CSS 3中的動畫功能 - 《HTML 5與CSS 3權威指南》

時間 2019-11-17

標籤第十九章 css 動畫功能 html 權威指南欄目 CSS 简体版

原文原文鏈接

在CSS 3中，增長了2種動畫功能：css

Transitions從一個屬性值平滑過渡到另外一個屬性值。
Animations支持經過關鍵幀的指定在頁面上產生更復雜的動畫效果。

本章個人代碼所有是再FireFox 9下載編寫，全部都是使用的 -moz-XXX。若是你使用的是Opera，請使用-o-XXX; 若是你使用的是Google\Apple瀏覽器，請使用-webkit-XXX。html

Transitionsweb

transitions屬性的使用方法瀏覽器

transitions: property duration timing-function

property表示哪一個屬性進行平滑過渡，duration表示在多長時間內完成屬性值的平滑過渡，timing-function表示經過什麼方法來進行平滑過渡。測試

<!DOCTYPE html>
<html>
	<head>
		<title>HTML 5與CSS 3權威指南 - 第十九章 CSS 3中的動畫功能</title>
		<style type="text/css">
		img{
			position: absolute;
			top 7px;
			left:0;
			background-color:#ffff00;
			-moz-transform: rotate(0deg);
			-moz-transitions:background-color 2s linear, -moz-transform 1s linear;
		}
		div:hover img{
			position: absolute;
			left: 30px;
			background-color:#00ffff;
			-moz-transform: rotate(720deg);
		}
		</style>
	</head>
	<body>
		<div>Transitions屬性測試DIV <img src="01.jpg" alt=" *" width="300px" /></div>
		<footer>代碼出自開源中國社區：<a href="http://my.oschina.net/TOW">Andy.Zhou</a></footer>
	</body>
</html>

本例子主要是實現圖片的平滑偏移極其旋轉720度的效果。動畫

transitions功能實現動畫有個缺點是隻能指定屬性的開始值和結束值，在這兩個值之間平滑過渡，因此就有了Animations。spa

Animations.net

animations與transitions功能相同，都是經過元素的屬性值來實現動畫的，區別在於animations經過定義多關鍵幀以及定義每一個關鍵幀的屬性值來實現更爲複雜的動畫。<未完待續，草稿保存時間太長了>code