CSS3 skew傾斜、rotate旋轉動畫

weixin_33941350發表於2017-07-08
CSSS3動畫

css3出現之前。我們實現一個物件的一組連續動畫須要通過JavaScript或Jquery編寫，指令碼程式碼較為複雜；

若須要實現傾斜、旋轉之類的動畫難度將更高（我還沒試過用JavaScript或Jquery怎樣實現），並且即使能實現預計花的時間代價及維護難度是非常大的，非常多時候僅僅能依靠繪圖工具製作此類動畫檔案；

有時候在想假設不用指令碼語言，也不用繪圖工作制作動畫檔案。就能在網頁上實現傾斜、旋轉之類的動畫效果多好。


近期擠出一些業餘時間學習CSS3，當中就包括非常多動畫演示樣例，花了點時間學習和整理

今天分享使用html+css3實現skew傾斜、rotate旋轉動畫，我們先看終於效果圖（我這裡為了演示效果。就用QQ螢幕截成多張圖片，然後製作成gif動畫給大家簡單展示下，效果不好請大家多多包涵）

html+css3skew傾斜、rotate旋轉動畫

圖1

詳細過程例如以下：

1、放置兩個div，一個作為容器（圖1中綠色背景部分 id="warp"）。還有一個作為動畫元素（圖1中黃色背景部分 id="box"）

HTML程式碼：

<div id="warp">
    <div id="box">WEB</div>
</div>
CSS程式碼（設定容器及動畫元素預設樣式）： 

#warp {
	width: 320px;
	height: 320px;
	background: #6FDE82;
	margin: 20px auto;
}
			
#box {
	height: 40px;
	width: 40px;
	background: yellow;
	position: relative;
	top: 280px;
	left: 0;
				
}

注意：#box{position: relative;}是為該元素接下來做動畫做準備，由於動畫過程中須要改變其位置，故這裡使用相對定位

上述程式碼為主要的html css，大家應該沒問題吧

此時效果例如以下：


2、使用CSS3 @keyframes自己定義動畫

CSS程式碼：

@keyframes move {
	0% {
	top: 280px;
	left: 0;
	transform: skewX(0deg);
	width: 40px;
	height: 40px;
	}
	20% {
	top: 0;
	left: 0;
	transform: skewX(50deg);
	width: 60px;
	height: 20px;
	background: red;
	}
	22% {
	top: 0;
	left: 0;
	transform: skewX(0deg);
	width: 40px;
	height: 40px;
	}
	30% {
	top: 0;
	left: 0;
	transform: skewX(0deg);
	width: 320px;
	height: 40px;
	}
	40% {
	top: 0;
	left: 280px;
	transform: skewX(0deg);
	width: 40px;
	height: 40px;
	background: green;
	}
	50% {
	top: 0;
	left: 280px;
	transform: skewX(0deg);
	width: 20px;
	height: 320px;
	}
	55% {
	top: 280px;
	left: 280px;
	transform: skewX(0deg);
	width: 40px;
	height: 40px;
	background: blue;
	}
	60% {
	transform: rotate(-90deg);
	transform-origin: left bottom;
	}
	65% {
	transform: rotate(-180deg);
	transform-origin: left top;
	}
}

程式碼解析：

  1. css3自己定義動畫須要使用@keyframes規則，詳細請看CSS3 @keyframes 規則

  2. 設定動畫執行進度

    本演示樣例中定義了 0% 20%  22% 30% 40% 50% 55% 60% 65%幾個動畫進度，

    百分比究竟代表什麼意思？

    舉例說明：假設整個動畫執行10秒。那麼20%就代表當動畫執行到2秒時的效果。所以整個自己定義動畫翻譯過來就是在每一個執行進度中定義css樣式（比方 width。height。color等）。這樣就形成了連貫的動畫效果。

    執行進度百分比依據實際情況可自行調整。

    注意：該執行進度並不是一定要設定100%，如本演示樣例中僅設定到65%，這就意味著剩下的35%就由css3自行完畢動畫迴歸到原始狀態（大家能夠試試）

  3. 元素傾斜（元素變形）、旋轉（元素不變形）

    本演示樣例中用到傾斜及旋轉動畫，傾斜使用skew()，引數為傾斜度數；旋轉使用rotate()，引數為旋轉度數。

    傾斜原理示意圖例如以下：



X軸逆時針轉為正。Y軸順時針轉為正；

舉例：

skew(30deg),在本演示樣例中效果將成這樣


skew(-30deg),在本演示樣例中效果將成這樣

Y軸的這裡就不舉例了。依據上述提示大家可自行測試效果

transform-origin。元素傾斜或轉動中心點，詳細屬性值可看CSS3 transform-origin 屬性

這裡的中心點，指的是動畫元素的中心點，元素環繞該點轉動或傾斜，該點座標是不會改變的。個人認為這裡須要頭腦中產生一些幾何圖形以便於理解。或者用一張紙（手機之類的物品）放在桌子上。用手固定該物品的某個點演示一下轉動效果，就明確了

3、執行自己定義動畫

CSS程式碼：

#box {
	height: 40px;
	width: 40px;
	background: yellow;
	position: relative;
	top: 280px;
	left: 0;
	animation: move 5s infinite;
}
程式碼解析：
animation: move 5s infinite;

代表該自己定義動畫完畢耗時5秒。而且無限迴圈執行

animation屬性的具體說明請看這裡CSS3 animation（動畫） 屬性

OK，上述步驟及原理大家都清楚了吧。

本演示樣例完整程式碼例如以下，各位能夠直接複製去執行看看效果



<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>HTML5+CSS3 skew傾斜、rotate旋轉動畫</title>
		<style type="text/css">
			
			#warp {
				width: 320px;
				height: 320px;
				background: #6FDE82;
				margin: 20px auto;
			}
			
			#box {
				height: 40px;
				width: 40px;
				background: yellow;
				position: relative;
				top: 280px;
				left: 0;
				animation: move 5s infinite;
				
			}
			
			@keyframes move {
				0% {
					top: 280px;
					left: 0;
					transform: skewX(0deg);
					width: 40px;
					height: 40px;
				}
				20% {
					top: 0;
					left: 0;
					transform: skewX(50deg);
					width: 60px;
					height: 20px;
					background: red;
				}
				22% {
					top: 0;
					left: 0;
					transform: skewX(0deg);
					width: 40px;
					height: 40px;
				}
				30% {
					top: 0;
					left: 0;
					transform: skewX(0deg);
					width: 320px;
					height: 40px;
				}
				40% {
					top: 0;
					left: 280px;
					transform: skewX(0deg);
					width: 40px;
					height: 40px;
					background: green;
				}
				50% {
					top: 0;
					left: 280px;
					transform: skewX(0deg);
					width: 20px;
					height: 320px;
				}
				55% {
					top: 280px;
					left: 280px;
					transform: skewX(0deg);
					width: 40px;
					height: 40px;
					background: blue;
				}
				60% {
					transform: rotate(-90deg);
					transform-origin: left bottom;
				}
				65% {
					transform: rotate(-180deg);
					transform-origin: left top;
				}
			}
		</style>
	</head>

	<body>
		<div id="warp">
			<div id="box">WEB</div>
		</div>
	</body>

</html>
好了，今天分享就到這裡，以後還有很多其它喲，請大家一起來交流下，有興趣的朋友給我的文章評論下嘛






相關文章