【CSS3中的動(dòng)畫(huà)功能】

/* 1.Transition功能，通過(guò)指定開(kāi)始結(jié)束狀態(tài)來(lái)過(guò)度，無(wú)法實(shí)現(xiàn)復(fù)雜動(dòng)畫(huà)。*/ /* transition:property duration timing-function */ transition-property: background-color; transition-duration: 3s; transition-timing-function: linear;transition: background-color 3s linear; /*簡(jiǎn)潔的寫(xiě)法*/transition: background-color 1s linear,color 1s linear,width 1s linear; /* 同時(shí)執(zhí)行多個(gè)動(dòng)畫(huà)效果 *//* 2.Animations功能，可以指定幀，實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)。 */ @-webkit-keyframes mycolor {0% /*開(kāi)始幀*/{background-color:red;}40% /*背景顏色變化幀 - 黃色*/{background-color:#ffff00;}70% /*背景顏色變化幀 - 藍(lán)色*/{background-color:aqua;}100% /*結(jié)束幀*/{background-color:red;} } div:hover {-webkit-animation:mycolor 5s linear; }/* 實(shí)現(xiàn)多個(gè)屬性值同時(shí)改變的動(dòng)畫(huà) */ @-webkit-keyframes mycolor {0%{background-color:Red;transform:rotate(0deg);}30%{background-color:aqua;transform:rotate(30deg);}60%{background-color:lightskyblue;transform:rotate(-30deg);}100%{background-color:Red;transform:rotate(0deg);} } div:hover {-webkit-animation-name:mycolor;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear; }/*參數(shù)含義*//* linear:勻速 ease-in:又慢到快 ease-out:由快到慢 ease:先慢再快再慢 ease-in-out:先慢再快再慢*/ View Code

?

轉(zhuǎn)載于:https://www.cnblogs.com/crayonchen/p/4929942.html

總結(jié)

以上是生活随笔為你收集整理的CSS 动画功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。