CSS製作網頁動畫

阿新 • • 發佈：2022-03-30

一、transition定義動畫過度效果

/*transition:
    第一個引數：過渡效果生效的樣式屬性，all代表所有屬性變化都可以有設定的過度效果
    第二個引數：過渡時間
    第三個引數：過渡效果樣式
    （1）linear:勻速
    （2）ease:慢-》快-》慢
    （3）ease-in:慢->快
    （4）ease-out:快->慢
    (5)ease-in-out:慢-》中-》慢
* */
#myImg{ transition: all 1s ease-in-out;}

transition只是設定動畫的過度效果，並不能直接產生動畫，必須和以下其他的動畫效果結合使用才能做出動畫效果。

二、製作位置移動動畫

<head>
	<meta charset="utf-8" />
	<title>製作位置平移效果</title>
	<style type="text/css">			
		#myImg{
			transition: all 1s ease-in-out;
		}
		#myImg:hover{
			transform: translate(60px,60px);
		}
	</style>
</head>
<body>
	<img id="myImg" src="img/timg.png" width="200" height="200" />
</body>

我們可以看到，滑鼠經過圖片的時候，圖片會經過1秒鐘向右向下平移60畫素。

三、傾斜動畫

<head>
	<meta charset="UTF-8">
	<title>傾斜效果</title>
	<style type="text/css">
		#myImg{ transition: all 2s ease-in-out;}
		#myImg:hover{
			transform: skew(50deg,50deg);
		}
	</style>
</head>
<body>
	<img id="myImg" src="img/timg.png" width="200" height="200" />
</body>

我們可以看到滑鼠經過圖片的時候，圖片經過2秒鐘時間沿著 X 和 Y 軸傾斜50度和50度。

四、旋轉動畫

<head>
	<meta charset="UTF-8">
	<title>旋轉效果</title>
	<style type="text/css">
		#myImg{ transition: all 1s ease-in-out;}
		#myImg:hover{
			transform:rotate(360deg);
		}
	</style>
</head>
<body>
	<img id="myImg" src="img/timg.png" width="200" height="200" />
</body>

我們可以看到滑鼠經過圖片的時候，圖片經過1秒鐘時間旋轉了360度。

五、縮放動畫

<head>
	<meta charset="UTF-8">
	<title>縮放動畫</title>
	<style type="text/css">
		#myImg{ transition: all 1s ease-in-out;}
		#myImg:hover{
			transform:scale(1.2);
		}
	</style>
</head>
<body>
	<img id="myImg" src="img/timg.png" width="200" height="200" />
</body>

我們可以看到滑鼠經過圖片的時候，圖片經過1秒鐘時間放大1.2倍。

六、動畫組合應用

<head>
	<meta charset="UTF-8">
	<title>動畫組合應用</title>
	<style type="text/css">
		#myImg{ transition: all 1s ease-in-out;}
		#myImg:hover{
			transform:rotate(360deg) scale(1.2);
		}
	</style>
</head>
<body>
	<img id="myImg" src="img/timg.png" width="200" height="200" />
</body>

我們可以將多個動畫放在一起組合應用，我們可以看到滑鼠經過圖片的時候，圖片經過1秒鐘時間旋轉360度，同時並且放大1.2倍。

七、animation製作自定義動畫

HTML:

<img id="myImg" src="img/plane.jpg" width="180" />

CSS:

/*定義關鍵幀*/
@keyframes myKey{
	0%{ width: 180px; top: 0px; left: 0px;
	transform: rotate(0deg);}
	25%{width: 180px; top: 200px; left: 250px;
	transform: rotate(45deg);}
	50%{width: 180px; top: 400px; left: 500px;
	transform: rotate(0deg);}
	75%{width: 180px; top: 200px; left: 750px;
	transform: rotate(-45deg);}
	100%{width: 180px; top: 0px; left: 1000px;
	transform: rotate(0deg);}
}
/*建立自定義動畫*/
#myImg{ position: absolute; animation: myKey 5s linear;}

我們可以看到圖片會按照定義的關鍵幀中的5個關鍵節點，總共歷時5秒鐘，分別完成位置，旋轉角度的變換過程。