小程序開發中有時需要使用 css 動畫來增加應用的交互性和用戶體驗，在小程序中可以使用 wxss（微信樣式表）實現 css 樣式的定義和使用。本文將分享小程序 css 動畫切換的實現方法。

小程序提供了 animation 動畫屬性，可以定義動畫的效果、持續時間、延遲時間和動畫強度等參數，使用起來非常方便。下面是一個簡單的 css 動畫的例子：

.box {
width: 100px;
height: 100px;
position: relative;
background-color: #f50;
/* 動畫屬性 */
animation-name: myanim;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
/* 定義動畫效果 */
@keyframes myanim {
from {left: 0;}
to {left: 200px;}
}

上述代碼中，定義了一個名為 myanim 的動畫效果，從 left:0 變化到 left:200px，然后再變回來，持續時間為 2 秒，循環播放。將該動畫屬性應用到元素 .box 上，即可實現一個簡單的動畫效果。

在小程序中，可以使用動態添加 css 類名來切換不同的動畫效果。下面是一個小程序實現 css 動畫切換的示例代碼：

Page({
data: {
animationClass: ''
},
changeAnimation: function () {
let animation = ''
if (this.data.animationClass === 'move') {
animation = 'rotate'
} else {
animation = 'move'
}
this.setData({
animationClass: animation
})
}
})

上述代碼中，通過動態綁定 wxss 樣式中的類名來切換不同的 css 動畫效果。在視圖層中，將變量 animationClass 綁定到元素的 class 屬性上，通過綁定的類名來應用不同的動畫效果。在邏輯層中，定義了一個 changeAnimation 函數，用于切換動畫效果，當 animationClass 名稱為 move 時，切換到 rotate 名稱，否則切換為 move 名稱。

總之，小程序使用 css 動畫可以很好地增加應用的交互性和可視化效果，并且通過動態添加 css 類名可以實現動畫的切換效果，非常簡單易用。