css3 過渡，轉換和動畫

在網絡快速發展的今天，靜態web頁面早已經不滿足人們的需求，因此我們需要更加炫酷的動畫渲染頁面，使得我們的頁面逼格滿滿，在css3中動畫的表現形式有過渡，2d動畫和3d動畫，給用戶一種耳目一新的全新體驗。

過渡（transition）

個人理解的過渡指的是某種元素的某種狀態在一定的時間段內發生的變化叫做過渡。

div:hover{
	width: 200px;
	height: 200px;
}

當我們鼠標移動到div元素中元素放大，此時感覺很突兀，我們給它一點過渡的效果。

transition: all 3s;

transition：style，time
- style：過渡的樣式，也可以設置all全部樣式。
- time：設置過渡的時間，單位爲秒（s）。

設置過渡的切換速度（transition-timing-function）

linear：全程以相同的速度過渡
ease：先慢速，然後變快，在慢速的過渡。
ease-in：以慢速開始的過渡。
ease-out：以慢速結束的過渡。
ease-in-out：以慢速開始和慢速結束的過渡。

關於linear我們很容易理解，但是關於ease我們還是不能夠很形象的看懂，來看一下曲線的路徑。

轉換（transform）

2D轉換

在2D轉換中，我們想象頁面爲一個2D平面，在這個平面裏我們可以有移動（translate），旋轉（rotate），縮放（scale）和傾斜（skew）的方法。

設置元素的參考點（transform-origin）

當然在我們做轉換的過程中，我們是有着一個參考點，我們需要依據參考點來進行轉換，因此我們也可以來設置參考點。

transform-origin: x y;

x，y的除了可以設置百分比和具體的位置外；
x軸的位置可以設置爲left，center，right；
y軸的位置可以位置爲top，center，bottom。

移動（translate）

transform: translate(100px,100px);

設置元素在x軸與y軸偏移的位置，以下將元素向x軸移動了100px，向y軸移動了100px。灰色元素僅做對照使用，黑色元素爲移動後的元素。

旋轉（rotate）

transform: rotate(45deg);

設置元素順時針旋轉，以下講元素旋轉了45°。

縮放（scale）

transform: scale(1.5,2);

縮放是將原元素按照設置的倍數進行縮放。以下x放大1.5倍，y放大2倍。

傾斜（skew）

transform: skew(15deg);

將元素傾斜15度。

3D轉換

在2D轉轉換中，我們無非只是一種視覺的原因，讓我們看起來不那麼形象具體，在現實生活中3D能夠看到更加形象具體的的圖像無非是人在不同的方向距離的狀態下看到的不同的圖像從而感受到3D的圖像，而在我們的JavaScript中也是模擬了人看物體的景深（perspective），位置（perspective-origin），並且開啓3D狀態（transform-style: preserve-3d）。

開啓3D狀態（transform-style: preserve-3d）

在進行3d裝換時需要先設置父容器爲3d狀態才瀏覽器纔會進行3d顯示。

景深（perspective）

景深就是設置眼睛距離位置的視距。

<div>
	<div></div>
	<h3>0</h3>
</div>

div{
	/*設置3d視角*/
	transform-style: preserve-3d;
}

div>div{
	width: 100px;
	height: 100px;
	background-color: rgba(255,0,0,0.5);
	// 設置元素偏移Z軸的位置
	transform: translateZ(100px);
}

var i = 0;
setInterval(function (argument) {
	i+=2;
	document.getElementsByTagName('div')[0].style.perspective = i + 'px';
},50)

我們設置定時器，將景深的距離依次增加，我們發現此元素的越來越小，這不就是正和我們的眼睛一樣嗎，當距離元素越遠時，元素顯示的越小。

當然景深不可能爲0，如果說在現實生活中爲視距爲0，那我們就不會看見這個元素。

位置（perspective-origin）

俗話說，千人千面。3d也是一樣，我們在不同的位置下觀看相同的東西，眼睛反饋回來給我們是不同的樣式。

body{
	transform-style: preserve-3d;
	perspective: 800px;
}

document.body.onmousemove = function (e) {
	this.style.perspectiveOrigin = e.pageX + "px " + e.pageY + "px" ;
}

爲了更好的演示效果，我們將body設置爲3d，將鼠標的位置代表的眼睛的位置，我們移動鼠標可以看見不同狀態的3d效果。

動畫（animation）

在css3中動畫是極其方便的，它甚至不用寫JavaScript代碼就可以實現運動的過程，而創建動畫就是想變換的過程有過渡的效果。

@keyframes run{
	form{
		width: 100px;
		height: 100px;
	}
	to{
		width: 200px;
		height: 200px;
	}
}
/*百分比形式*/
@keyframes run{
	0%{
		width: 100px;
		height: 100px;
	}
	50%{
		width: 150px;
		height: 150px;
	}
	100%{
		width: 200px;
		height: 200px;
	}
}

創建一個名爲run的動畫，且從form的狀態開始，到to的狀態結束。如果說還有其他的過程我們也可以寫成百分比的形式。

div:hover{
	animation: run 3s;
}

當鼠標移入元素上時我們開始運行動畫，且在3s中完成這個動畫，並且回到原始狀態。

設置動畫的速度狀態（animation-timing-function）

和過渡的是一樣的道理，可以翻到開篇的位置進行查看。

設置動畫播放的次數（animation-iteration-count）

我們的動畫默認播放一次，也就是默認值爲1，當我們我們也可以讓他重複播放。

div:hover{
	animation: run 3s ease infinite;
}
@keyframes run{
	form{
		left: calc(50% - 50px);
		top: calc(50% - 50px);
	}
	to{
		left: calc(50% + 50px);
		top: calc(50% + 50px);
	}
}

設置動畫的週期是否交替反向播放（animation-direction）

動畫執行時我們可以設置動畫的播放方向，當然動畫被設置只播放一次將無法起作用。

div:hover{
	animation: run 3s ease infinite;
	// 設置動畫奇數正向播放，偶數反向播放。
	animation-direction: alternate;
}

@keyframes run{
	form{
		left: calc(50% - 50px);
		top: calc(50% - 50px);
	}
	to{
		left: calc(50% + 50px);
		top: calc(50% + 50px);
	}
}

以上設置animation-direction: alternate 奇數正向播放，偶數反向播放，當然還有animation-direction: alternate-reverse 奇數反向播放，奇數正向播放；animation-direction: reverse 動畫反向播放。

小案例（3D相冊）

關於css3過渡，轉換和動畫就差不多了，既然你都看到這裏來了，不妨再完成一個動畫的小案例吧。

開啓3d模式

我們設置body開啓3d模式，給一個容器居中，並且也開啓3d模式。

<div class="contain"></div>

*{
	margin: 0;
	padding: 0;
}

:root,body{
	height: 100%;
}

body{
	perspective: 800px;
	perspective-origin:50%;
	transform-style: preserve-3d;
}

.contain{
	width: 200px;
	height: 200px;
	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 100px);
	
	/*設置3d*/
	transform-style: preserve-3d;
}

創建上下左右前後的容器

<div class="contain">
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</div>

.contain>div{
	width: 200px;
	height: 200px;
	border: 1px solid;
	position: absolute;
}

設置前後兩個面的位置

.contain>div:nth-of-type(1){
	background: url(images/1.jpeg) no-repeat;
	background-size: cover;
	transform: translateZ(-100px);
}
.contain>div:nth-of-type(6){
	background: url(images/6.jpeg) no-repeat;
	background-size: cover;
	transform: translateZ(100px);
}

設置左右兩個面的位置

.contain>div:nth-of-type(4){
	background: url(images/4.jpeg) no-repeat;
	background-size: cover;
	transform: rotateY(90deg);
	margin-left: 100px;
}
.contain>div:nth-of-type(5){
	background: url(images/5.jpeg) no-repeat;
	background-size: cover;
	transform: rotateY(90deg);
	margin-left: -100px;
}

設置上下兩個面的位置

.contain>div:nth-of-type(4){
	background: url(images/2.jpeg) no-repeat;
	background-size: cover;
	transform: rotateX(90deg);
	margin-top: 100px;
}

.contain>div:nth-of-type(3){
	background: url(images/3.jpeg) no-repeat;
	background-size: cover;
	transform: rotateX(90deg);
	margin-top: -100px;
}

設置動畫

.contain{
	animation: run 20s linear infinite;
}
@keyframes run{
	from{
		transform: rotateY(0deg) rotateX(0deg);
	}
	50%{
		transform: rotateY(180deg) rotateX(180deg);
	}
	to{
		transform: rotateY(360deg) rotateX(360deg);
	}
}

css3 過渡，轉換和動畫