css3中animation動畫屬性怎么用

這篇文章給大家介紹css3中animation動畫屬性怎么用，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

　　CSS主要是用于描繪網頁的樣式和布局而CSS3是最新的CSS標準，提供了更多的方法而且使用CSS3，可以創建動畫，使網頁內容更加豐富今天將和大家分享css3中的動畫屬性——animation

　　注意在使用過程中瀏覽器兼容問題

　　InternetExplorer10、Firefox以及Opera支持animation屬性。

　　Safari和Chrome支持-webkit-animation屬性

　　所以在寫程序的過程中應考慮到瀏覽器兼容問題

　　animation屬性

　　用于設置六個動畫屬性：

　?。?）animation-name：規定動畫的名稱。

　　animation-name:demo//InternetExplorer10、Firefox以及Opera瀏覽器中

　　-webkit-animation-name:demo//Safari和Chrome

　?。?）animation-duration：完成動畫所花費的時間（以秒和毫秒為單位）

　　animation-duration：3s；

　　-webkit-animation-duration:3s;

　?。?）animation-timing-function：動畫速度曲線

　　linear：以勻速播放

　　ease：剛開始動畫速度慢然后加快在結束時變慢（默認）

　　ease-in：指動畫以低速開始

　　ease-out：指動畫以低速結束。

　　ease-in-out：動畫以低速開始和結束

　　cubic-bezier(n,n,n,n)：在cubic-bezier函數中設置想要的值，是從0到1的數值

　　animation-timing-function：ease；

　　-webkit-animation-timing-function:ease;

　?。?）animation-delay：動畫開始延遲時間

　　animation-delay：3s；

　　-webkit-animation-delay:3s;

　?。?）animation-iteration-count：動畫播放的次數

　　n:自定義動畫播放次數的數值

　　infinite：指動畫無限次循環播放

　　animation-iteration-count：4；//循環四次

　　-webkit-animation-iteration-count:infinite;//循環無數次

　?。?）animation-direction：動畫是否輪流反向播放

　　normal動畫應該正常播放（默認）

　　alternate動畫應該輪流反向播放

　　animation-direction：normal;

　　-webkit-animation-direction:alternate;

　　讓一個小方塊按照右下左上的方向進行運動

　　div
　　{
　　width:100px;
　　height:100px;
　　background:red;
　　position:relative;
　　animation:demo;
　　animation-iteration-count：infinite;
　　animation-duration:2s;
　　animation-timing-function:ease;
　　animation-delay:0.1s;
　　animation-direction:alternate;
　?。?
　　/*SafariandChrome瀏覽器*/
　　-webkit-animation:demo;/*設置動畫名稱*/
　　-webkit-animation-iteration-count：infinite;/*動畫執行次數*/
　　-webkit-animation-duration:5s;/*動畫花費時間*/
　　-webkit-animation-timing-function:ease;/*動畫速度*/
　　-webkit-animation-delay:2s;/*動畫延遲*/
　　-webkit-animation-direction:alternate;/*動畫是否反向*/
　　}
　　/*設置動畫運行區域*/
　　@keyframesdemo
　　{
　　0%{background-color:pink;left:0;top:40px;}
　　25%{background-color:hotpink;left:300px;top:40px;}
　　50%{background-color:yellow;left:300px;top:340px;}
　　75%{background-color:blue;left:0;top:340px;}
　　100%{background-color:green;left:0;top:30px;}
　　}
　　/*SafariandChrome瀏覽器*/
　　@-webkit-keyframesdemo
　　{
　　0%{background-color:pink;left:0;top:40px;}
　　25%{background-color:hotpink;left:300px;top:40px;}
　　50%{background-color:yellow;left:300px;top:340px;}
　　75%{background-color:blue;left:0;top:340px;}
　　100%{background-color:green;left:0;top:30px;}
　　}
　　</style>

css的三種引入方式

1.行內樣式，最直接最簡單的一種，直接對HTML標簽使用style=""。2.內嵌樣式，就是將CSS代碼寫在之間，并且用

進行聲明。3.外部樣式，其中鏈接樣式是使用頻率最高，最實用的樣式，只需要在之間加上

關于css3中animation動畫屬性怎么用就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。