css3-動畫(animation)

yacheng 發布于2019-04-23 13:29 / 3021人閱讀

摘要：動畫在啟動前的延遲間隔，默認是動畫的播放次數，默認是是否輪流反向播放動畫動畫是否正在運行或已暫停。值指定暫停動畫指定正在運行的動畫，默認。

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:

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 */
	}
}

云服務器 GPU云服務器 css3動畫高性能css3動畫 animated anime

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1940.html

css3 動畫（三）animation 簡介

摘要：默認，只執行一次動畫動畫名稱，該名稱為動畫關鍵幀的名稱。默認如何理解表示的是關鍵幀的名稱，那么如何定義關鍵幀呢使用。語法名稱關鍵幀樣式或總結其實也并不復雜，其有個子屬性。下一篇動畫三源碼解析通過閱讀動畫庫的源碼，來提高對中屬性的認識前言上一篇中，總結了一下 transition 以及 cubic-bezier()。本篇中，將介紹 css3 動畫中的更為靈活的動畫屬性：animati...

itvincent 2019-08-29 16:05 評論0 收藏0
css3 動畫（四）animation.css 源碼分析

摘要：前言上一篇動畫三簡介中只是簡單的介紹了一下的子屬性，并沒有真正的使用。在本篇中，通過閱讀這個的動畫庫，來加深對的屬性的理解。是一個具有非常多的動畫效果的動畫庫。動畫效果演示用法加上基礎類以及動畫類，就會有閃爍的動畫效果。前言上一篇 css3 動畫（三）animation 簡介中只是簡單的介紹了一下 animation 的子屬性，并沒有真正的使用。在本篇中，通過閱讀 animate...

ThreeWords 2019-08-29 16:05 評論0 收藏0
進入 CSS3 動畫

摘要：我最近有機會深入研究一些動畫。下一步是添加動畫效果并確定它們何時發生。創建關鍵幀后，您可以將動畫稱為屬性。點擊動畫使用上面的關鍵幀和動畫語法，這里是我用來在本頁頂部的中制作動畫的代碼。我最近有機會深入研究一些CSS3動畫。我使用了像animate.css這樣的庫，用javascript完成了動畫，但從未做過任何自定義的CSS3工作原文任務我們最近在SeatGeek更新了我們的...

lindroid 2019-08-30 15:44 評論0 收藏0
css3中的變形（transform）、過渡（transition）、動畫（animation）屬性

摘要：中制作動畫的幾個屬性中的變形過渡動畫。默認值為，為時，表示變化是瞬時的，看不到過渡效果。實現動畫效果主要由兩部分組成通過類似動畫中的幀來聲明一個動畫在屬性中調用關鍵幀聲明的動畫。 css3中制作動畫的幾個屬性：css3中的變形（transform）、過渡（transition）、動畫（animation）。一、 CSS3變形（transform）語法： transform ： no...

waruqi 2019-08-30 10:51 評論0 收藏0
兩種方案開發小程序動畫

摘要：通過這種方法產生的動畫，無法按照原有軌跡收回，所以在事件之后設置了定時器，定義在執行動畫之后，執行另一個動畫。方式存在較多局限性動畫只能執行一次，循環效果需要通過定時器完成。在普通的網頁開發中，動畫效果可以通過css3來實現大部分需求，在小程序開發中同樣可以使用css3，同時也可以通過api方式來實現。指路：小程序animatiom動畫API API解讀小程序中，通過調用api來...

MingjunYang 2019-08-23 12:58 評論0 收藏0
兩種方案開發小程序動畫

摘要：通過這種方法產生的動畫，無法按照原有軌跡收回，所以在事件之后設置了定時器，定義在執行動畫之后，執行另一個動畫。方式存在較多局限性動畫只能執行一次，循環效果需要通過定時器完成。在普通的網頁開發中，動畫效果可以通過css3來實現大部分需求，在小程序開發中同樣可以使用css3，同時也可以通過api方式來實現。指路：小程序animatiom動畫API API解讀小程序中，通過調用api來...

chengjianhua 2019-08-29 17:13 評論0 收藏0