首頁 > web前端 > css教學 > 主體

css3的動畫(animation)屬性的詳解(附程式碼)

不言
發布: 2018-08-10 10:11:31
原創
2255 人瀏覽過

這篇文章帶給大家的內容是關於css3的動畫(animation)屬性的詳解(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

css3動畫(animation)具有以下屬性:

1、animation-name 自訂動畫名稱
 2、animation-duration   動畫指定需要多少秒或毫秒才能完成,預設值是0;
 3、animation-timing-function  動畫的時間曲線,linear  勻速, ease   先慢後快,結束前變慢。
 4、animation-delay   動畫在啟動前的延遲間隔,預設是0
 5、animation-iteration-count    動畫的播放次數,預設為1
 6、animation-direction    是否輪流反向播放動畫
 7、animation-play-state    動畫是否正在運作或已暫停。   值:paused  指定暫停動畫  ;  running   指定正在運作的動畫,預設。

實例:本demo以平移(translate)為例說明動畫的整個過程

html:

<body>
		<div class="warp">
			
		</div>
</body>
登入後複製

css :

.warp{
	    height: 100px;
	     width: 100px;
	     border: 1px solid #eee;
			
            animation-name:moves;
            animation-direction:alternate;
            animation-delay: 0.2s;
            animation-duration: 5s;
            animation-play-state: paused;
            animation-iteration-count: 3;
           /*以上可以简写成:*/
           animation: moves 5s linear 0.2s 3;
}
登入後複製

@keyframes moves{                           /*动画名称自定义*/
	10%{                                    /*时间点可以任意,10%表示当时间进行到10%是元素要达到的状态*/
		transform: translate(100px,0);       
		-ms-transform:translate(100px,0);	 /*IE 9*/ 
		-moz-transform:translate(100px,0); 	/* Firefox */
		-webkit-transform:translate(100px,0); /* Safari 和 Chrome */
		-o-transform:translate(100px,0); 	/* Opera */
	}
	30%{                                    /*时间点可以任意*/
		transform: translate(100px,100px);
		-ms-transform:translate(100px,100px);	 /*IE 9*/ 
		-moz-transform:translate(100px,100px); 	/* Firefox */
		-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */
		-o-transform:translate(100px,100px); 	/* Opera */
	}
	60%{                                       /*时间点可以任意*/
		transform: translate(0,100px);
		-ms-transform:translate(0,100px);	 /*IE 9*/ 
		-moz-transform:translate(0,100px); 	/* Firefox */
		-webkit-transform:translate(0,100px); /* Safari 和 Chrome */
		-o-transform:translate(0,100px); 	/* Opera */
	}
	100%{                                /*时间点可以任意*/
		transform: translate(0,0);
		-ms-transform:translate(0,0);	 /*IE 9*/ 
		-moz-transform:translate(0,0); 	/* Firefox */
		-webkit-transform:translate(0,0); /* Safari 和 Chrome */
		-o-transform:translate(0,0); 	/* Opera */
	}
}
登入後複製

相關推薦:

怎麼純用css程式碼使文字展示閃動效果? (程式碼範例)

如何使用CSS 和D3實現擺線搖擺的效果動畫

#

以上是css3的動畫(animation)屬性的詳解(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板