css3中的動畫學習分享

你們好,這裏是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定義動畫開始前等待的時間,以秒或毫秒計(屬於動畫外的範疇)
值:瀏覽器

最後,咱們經過一張動畫幀圖製做一個簡易動畫,原圖以下:
在這裏插入圖片描述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

相關文章
相關標籤/搜索