先看下效果：
除了有點快，動畫效果還可以。
它是怎麼實現的？
拿第乙個雙塊舞動畫研究一下好啦。
mxml:
class="sk-wandering-cubes">
class="sk-cube sk-cube1">
class="sk-cube sk-cube2">
css:
.sk-wandering-cubes .sk-cube
.sk-wandering-cubes .sk-cube2
@-webkit-keyframes sk-wanderingcube
25%
50%
50.1%
75%
100%
}是用css3動畫樣式實現的效果。sk-wanderingcube是自定義的動畫名稱，並非css3預定義的。
如果將兩個方塊，加到3個，如何？
新增乙個sk-cube3，及其對應的新式？
class="sk-cube sk-cube3">
.sk-wandering-cubes .sk-cube3
執行一下，不失所望：
（實際執行效果沒有這麼快，不知為什麼用qq擷取動畫後就變快了~）
如果把動畫改慢一點，讓三個方塊，平均分布也是可以的，讓其在空間上平均分布，即是讓它們平均動畫時間。
達到這樣的效果，修改每楨間隔0.6s就可以了：
.sk-wandering-cubes .sk-cube
.sk-wandering-cubes .sk-cube2
.sk-wandering-cubes .sk-cube3
此外，animation-delay是標準名稱，-webkit-animation-delay是safafi與chrome支援的名稱，其它以-webkit-開頭的css樣式名是類似的。
如果只保留-webkit-*宣告，如上所示。在微信web開發者工具上執行正常，因為它是基於chrome同樣的核心渲染的css3樣式。在android手機上也可以，親測。在ios上沒有測試，有興趣的同學不妨測試下。
一般情況下，標準名稱與webkit名稱是同時定義的。
關於動畫的說明
使用@keyframes規則，你可以建立動畫。建立動畫是通過逐步改變從乙個css樣式設定到另乙個。
在動畫過程中，您可以更改css樣式的設定多次。指定的變化時發生時使用％，或關鍵字"from"和"to"，這是和0％到100％相同。0％是開頭動畫，100％是當動畫完成。
為了獲得最佳的瀏覽器支援，您應該始終定義為0％和100％的選擇器。
注意: 使用animation屬性來控制動畫的外觀，還使用選擇器繫結動畫。.
繫結動畫的語法有些複雜：
微信小程式 css3底部彈出框
日常記錄 goodsdetails.wxml 加入購物車 立即購買 goodsdetails.wxss 模態框 modals modals cancel bottom dialog body 動畫前初始位置 bottom posgoodsdetails.js page 跳到購物車 addcar 立即...
CSS3實現微信小程式瀑布流布局
1.column count 屬性規定元素應該被分隔的列數 moz column count 3 firefox webkit column count 3 safari 和 chrome column count 3 2.column gap 屬性規定列之間的間隔 moz column gap 4...
微信小程式CSS布局
採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 1 flex direction flex direction屬性決定主軸的方向 即專案的排列方向 row 預設值 主軸為水平方向，起...