這篇文章給大家介紹css3中animation動(dòng)畫(huà)屬性怎么用，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

點(diǎn)軍網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),點(diǎn)軍網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為點(diǎn)軍上1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的點(diǎn)軍做網(wǎng)站的公司定做！

CSS主要是用于描繪網(wǎng)頁(yè)的樣式和布局而CSS3是最新的CSS標(biāo)準(zhǔn)，提供了更多的方法而且使用CSS3，可以創(chuàng)建動(dòng)畫(huà)，使網(wǎng)頁(yè)內(nèi)容更加豐富今天將和大家分享css3中的動(dòng)畫(huà)屬性——animation

注意在使用過(guò)程中瀏覽器兼容問(wèn)題

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

Safari和Chrome支持-webkit-animation屬性

所以在寫(xiě)程序的過(guò)程中應(yīng)考慮到瀏覽器兼容問(wèn)題

animation屬性

用于設(shè)置六個(gè)動(dòng)畫(huà)屬性：

（1）animation-name：規(guī)定動(dòng)畫(huà)的名稱(chēng)。

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

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

（2）animation-duration：完成動(dòng)畫(huà)所花費(fèi)的時(shí)間（以秒和毫秒為單位）

animation-duration：3s；

-webkit-animation-duration:3s;

（3）animation-timing-function：動(dòng)畫(huà)速度曲線

linear：以勻速播放

ease：剛開(kāi)始動(dòng)畫(huà)速度慢然后加快在結(jié)束時(shí)變慢（默認(rèn)）

ease-in：指動(dòng)畫(huà)以低速開(kāi)始

ease-out：指動(dòng)畫(huà)以低速結(jié)束。

ease-in-out：動(dòng)畫(huà)以低速開(kāi)始和結(jié)束

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

animation-timing-function：ease；

-webkit-animation-timing-function:ease;

（4）animation-delay：動(dòng)畫(huà)開(kāi)始延遲時(shí)間

animation-delay：3s；

-webkit-animation-delay:3s;

（5）animation-iteration-count：動(dòng)畫(huà)播放的次數(shù)

n:自定義動(dòng)畫(huà)播放次數(shù)的數(shù)值

infinite：指動(dòng)畫(huà)無(wú)限次循環(huán)播放

animation-iteration-count：4；//循環(huán)四次

-webkit-animation-iteration-count:infinite;//循環(huán)無(wú)數(shù)次

（6）animation-direction：動(dòng)畫(huà)是否輪流反向播放

normal動(dòng)畫(huà)應(yīng)該正常播放（默認(rèn)）

alternate動(dòng)畫(huà)應(yīng)該輪流反向播放

animation-direction：normal;

-webkit-animation-direction:alternate;

讓一個(gè)小方塊按照右下左上的方向進(jìn)行運(yùn)動(dòng)

　　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;/*設(shè)置動(dòng)畫(huà)名稱(chēng)*/
　　-webkit-animation-iteration-count：infinite;/*動(dòng)畫(huà)執(zhí)行次數(shù)*/
　　-webkit-animation-duration:5s;/*動(dòng)畫(huà)花費(fèi)時(shí)間*/
　　-webkit-animation-timing-function:ease;/*動(dòng)畫(huà)速度*/
　　-webkit-animation-delay:2s;/*動(dòng)畫(huà)延遲*/
　　-webkit-animation-direction:alternate;/*動(dòng)畫(huà)是否反向*/
　　}
　　/*設(shè)置動(dòng)畫(huà)運(yùn)行區(qū)域*/
　　@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.行內(nèi)樣式，最直接最簡(jiǎn)單的一種，直接對(duì)HTML標(biāo)簽使用style=""。2.內(nèi)嵌樣式，就是將CSS代碼寫(xiě)在之間，并且用

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

就可以了。其次就是導(dǎo)入樣式，導(dǎo)入樣式和鏈接樣式比較相似，采用@import樣式導(dǎo)入CSS樣式表，不建議使用。

關(guān)于css3中animation動(dòng)畫(huà)屬性怎么用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章名稱(chēng)：css3中animation動(dòng)畫(huà)屬性怎么用
網(wǎng)頁(yè)路徑：http://jinyejixie.com/article16/gdjigg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、服務(wù)器托管、網(wǎng)站策劃、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、電子商務(wù)、用戶(hù)體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)