CSS3設定動畫的相關屬性有哪些-前端問答-PHP中文網

CSS3設定動畫的相關屬性有哪些

青灯夜游

發布： 2022-03-15 17:26:34

原創

2876 人瀏覽過

動畫相關屬性有：transform、transform-origin、transition、「@keyframes」、animation、animation-name、animation-duration、animation-delay等。

CSS3設定動畫的相關屬性有哪些

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css3有三種動畫分為：transform、transition、animation

#1、transform（2D/3D 轉換屬性）

##3 transform-style3D空間中的指定如何嵌套元素3perspective 指定3D元素是如何查看透視圖3#perspective-origin指定3D元素底部位置3backface-visibility定義一個元素是否應該是可見的，不對著螢幕時3

屬性	說明	#CSS
transform	適用於2D或3D轉換的元素	3
transform-origin	#允許您更改轉換元素位置

2、transition（過渡屬性）

屬性說明CSStransition此屬性是transition-property、transition-duration、transition-timing-function、transition-delay 的簡寫形式。 3transition-property設定用來進行過渡的 CSS 屬性。 3transition-duration設定過渡進行的時間長度。 3transition-timing-function設定過渡進行的時序函數。 3transition-delay指定過渡開始的時間。 3

3、animation（動畫屬性）

屬性描述CSS#@keyframes定義一個動畫,@keyframes定義的動畫名稱用來被animation-name所使用。 3animation複合屬性。檢索或設定物件所套用的動畫特效。 3animation-name檢索或設定物件所套用的動畫名稱,必須與規則@keyframes搭配使用，因為動畫名稱由@keyframes定義3animation-duration檢索或設定物件動畫的持續時間3#animation-timing-function#或設定物件動畫的轉換類型3##animation-delay#animation-iteration-countanimation-directionanimation-play-state範例：







檢索或設定物件動畫的延遲時間	3
檢索或設定物件動畫的循環次數	3
檢索或設定物件動畫在循環中是否反向運動	3
檢索或設定物件動畫的狀態	3

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 50px;
				height: 50px;
				background: red;
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					width: 150px;
					height: 150px;
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					width: 100px;
					height: 100px;
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>

登入後複製

CSS3設定動畫的相關屬性有哪些（學習影片分享：