今天小編給大家分享一下css3中的動(dòng)畫怎么處理的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供尖山網(wǎng)站建設(shè)、尖山做網(wǎng)站、尖山網(wǎng)站設(shè)計(jì)、尖山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、尖山企業(yè)網(wǎng)站模板建站服務(wù)，十余年尖山做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

動(dòng)畫--過(guò)渡屬性

div {

width: 200px;

height: 200px;

background: red;

margin: 20px auto;

-webkit-transition-property: width;

transition-property: width;

-webkit-transition-duration:.5s;

transition-duration:.5s;

-webkit-transition-timing-function: ease-in;

transition-timing-function: ease-in;

-webkit-transition-delay: .18s;

transition-delay:.18s;

}

div:hover {  transition: all .28s ease-in .1s;

width: 400px;

}

Keyframes被稱為關(guān)鍵幀 以“@keyframes”開(kāi)頭

@keyframes changecolor{ 聲明的動(dòng)畫可自己定義

0%{

background: red;

}

40% {

background:orange;

100%{

background: green;

}

}

div{animation-iteration-count:infinite;

animation-iteration-count:5;

animation-name:move;

animation-direction:alternate;

animation-play-state:paused;

}

設(shè)置動(dòng)畫播放方向  animation-direction

其主要有兩個(gè)值：normal、alternate

1、normal是默認(rèn)值，如果設(shè)置為normal時(shí)，動(dòng)畫的每次循環(huán)都是向前播放；

2、另一個(gè)值是alternate，他的作用是，動(dòng)畫播放在第偶數(shù)次向前播放，第奇數(shù)次向反方向播放。

1 <div><span></span></div>

2

3                          div {

4                              width: 200px;

5                              height: 200px;

6                              border: 1px solid red;

7                              margin: 20px auto;

8                          }

9     span {

10         display: inline-block;

11         width: 20px;

12         height: 20px;

13         background: orange;

14         transform: translateY(90px);

15         animation-name: move;

16         animation-duration: 10s;

17         animation-timing-function: ease-in;

18         animation-delay: .2s;

19         animation-iteration-count:infinite;

20         animation-direction:alternate;

21     }

22

23     @keyframes move {

24         0%{

25             transform: translateY(90px);

26         }

27         15%{

28             transform: translate(90px,90px);

29         }

30         30%{

31             transform: translate(180px,90px);

32         }

33         45%{

34             transform: translate(90px,90px);

35         }

36         60%{

37             transform: translate(90px,0);

38         }

39         75%{

40             transform: translate(90px,90px);

41         }

42         90%{

43             transform: translate(90px,180px);

44         }

45         100%{

46             transform: translate(90px,90px);

47         }

48     }

以上就是“css3中的動(dòng)畫怎么處理”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享標(biāo)題：css3中的動(dòng)畫怎么處理
本文網(wǎng)址：http://jinyejixie.com/article44/jjishe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、企業(yè)建站、網(wǎng)站改版、軟件開(kāi)發(fā)、網(wǎng)站制作、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(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)