css3中的動畫學習分享

時間 2021-03-18

標籤 css html css3 瀏覽器 css3動畫函數動畫 url 3d code 欄目 CSS 简体版

原文原文鏈接

你們好，這裏是demo軟件園，今天爲你們分享的是css3中的動畫（animation）。

css3動畫：

使元素從一種樣式逐漸變化爲另外一種樣式的效果。css

動畫原理：經過把人物的表情、動做、變化等分解後畫成許多動做瞬間的畫幅，利用視覺暫留的原理，在一幅畫尚未消失前，播放下一幅畫。就會給人形成一種流暢的視覺變化效果。
animation屬性是一個簡寫屬性形式: （能夠用來描述可動畫的屬性）html

可動畫屬性的列表：
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Css3的動畫中，咱們不得不提到關鍵幀（@keyframes）
語法：
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
animiationName:必寫項，定義動畫的名稱
keyframes-selector：必寫項，能夠是關鍵幀form（0%）和to（100%）能夠是百分比，表明的是時間的百分比（時間點）
from：0%
to：100%
css-style：css聲明css3

animation：

animation-name屬性指定應用的一系列動畫，每一個名稱表明一個由@keyframes定義的動畫序列
值： none特殊關鍵字，表示無關鍵幀。
keyframename標識動畫的字符串
animation-duration屬性指定一個動畫週期的時長。
默認值爲0s，表示無動畫。
值：一個動畫週期的時長，單位爲秒(s)或者毫秒(ms)，無單位值無效。注意：負值無效，瀏覽器會忽略該聲明，可是一些早起的帶前綴的聲明會將負值看成0s
animation-timing-function屬性定義CSS動畫在每一動畫週期中執行的節奏。對於關鍵幀動畫來講，timing function做用於一個關鍵幀週期而非整個動畫週期，即從關鍵幀開始，到關鍵幀結束。
動畫的默認效果：由慢變快再變慢
animation-delay定義動畫開始前等待的時間,以秒或毫秒計(屬於動畫外的範疇)
值:從動畫樣式應用到元素上到元素開始執行動畫的時間差。該值可用單位爲秒(s)和毫秒(m s)。若是未設置單位，定義無效
animation-iteration-count定義了動畫執行的次數（屬於動畫內的範疇）
值：infinite無限循環播放動畫.
動畫播放的次數不可爲負值.
animation-direction定義了動畫執行的方向
值：normal 每一個循環內動畫向前循環，換言之，每一個動畫循環結束，動畫重置到起點從新開始，這是默認屬性。
alternate動畫交替反向運行，反向運行時，動畫按步後退，同時，帶時間功能的函數也反向，好比，ease-in 在反向時成爲ease-out。計數取決於開始時是奇數迭代仍是偶數迭代
reverse 反向運行動畫，每週期結束動畫由尾到頭運行。
alternate-reverse反向交替，反向開始交替
animation-fill-mode屬於動畫外的範疇，定義動畫在動畫外的狀態
值：backwards：from以前的狀態與form的狀態保持一致
forwards：to以後的狀態與to的狀態保持一致
botn：backwards+forwards
animation-play-state定義了動畫執行的運行和暫停
值：running當前動畫正在運行。
paused當前動畫以被中止。
注意：在每一個動畫定義中，順序很重要：能夠被解析爲的第一個值被分配給animation-duration, 第二個分配給 animation-delay。瀏覽器

最後，咱們經過一張動畫幀圖製做一個簡易動畫，原圖以下：
css3動畫

CSS3動畫效果圖以下：
函數

代碼以下：動畫

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#test{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate3d(-50%,-50%,0);
				width: 146px;
				height: 244px;
				background: url(test.png) no-repeat;
				background-position:0 0;
				animation: move 1s steps(7,end) infinite ;
			}
			@keyframes move{
				from{
					background-position: 0 0;
				}
				to{
					background-position:-1024px 0;
				}
			}
		</style>
	</head>
	<body>
		<div id="test">
		</div>
	</body>
</html>

好了，今天的分享就到這裏，固然，可能存在些許錯誤望你們海涵並在評論區多多指正交流，謝謝你們花費時間閱覽！url