隨著智能手機(jī)和可穿戴設(shè)備的流行，小程序已經(jīng)成為了一個(gè)越來(lái)越流行的開(kāi)發(fā)方式。其中，css3動(dòng)畫(huà)是小程序中非常重要的一部分，下面我們來(lái)詳細(xì)了解一下。

.box{
width: 100px;
height: 100px;
background-color: blue;
animation: change 2s infinite;
-webkit-animation: change 2s infinite;
-moz-animation: change 2s infinite;
-o-animation: change 2s infinite;
}
@keyframes change{
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}

代碼中，我們定義了一個(gè).box的樣式，它是一個(gè)100*100大小的藍(lán)色正方形。然后我們使用了animation屬性來(lái)定義我們要使用的動(dòng)畫(huà)，change是動(dòng)畫(huà)的名字，2s表示動(dòng)畫(huà)持續(xù)2秒，infinite表示動(dòng)畫(huà)無(wú)限循環(huán)。

@keyframes則是定義了動(dòng)畫(huà)的執(zhí)行過(guò)程。我們定義了3個(gè)關(guān)鍵幀，0%是初始狀態(tài)，50%是旋轉(zhuǎn)了一半的狀態(tài)，100%是完成旋轉(zhuǎn)的狀態(tài)。我們使用transform屬性，將元素旋轉(zhuǎn)一定的角度來(lái)實(shí)現(xiàn)了旋轉(zhuǎn)的效果。

當(dāng)然這只是一個(gè)簡(jiǎn)單的例子，css3動(dòng)畫(huà)的變化很多，例如可以使用transition實(shí)現(xiàn)平滑過(guò)渡效果，還可以使用類(lèi)似于transform等其他的屬性。

總而言之，css3動(dòng)畫(huà)不僅可以豐富頁(yè)面效果，還可以提升用戶(hù)體驗(yàn)。因此在小程序開(kāi)發(fā)中，合理地使用css3動(dòng)畫(huà)是非常重要的。