小米盒子動畫是運用CSS技術實現的，它主要包括動畫效果和過渡效果兩大類。下面我們分別來介紹一下它們是如何實現的。

動畫效果包括平移、旋轉、縮放和淡入淡出四種，它們通過CSS3中的關鍵幀動畫（@keyframes）來實現。以下是一個平移效果的示例代碼：

.box {
position: relative;
animation: move 2s infinite;
}
@keyframes move {
0% {
left: 0px;
}
50% {
left: 200px;
}
100% {
left: 0px;
}
}

代碼中首先定義了一個“box”類，其中設定了position屬性為relative，以便動畫效果的進行。接著使用animation屬性指定該動畫所采用的關鍵幀集合，即“move”動畫，持續時間為2s，循環播放。最后，在@keyframes中定義了關鍵幀的樣式，0%代表起始狀態，50%代表中間狀態，100%代表結束狀態。

過渡效果則是在元素屬性值的變化中產生的平滑過渡效果。比如鼠標懸停在一個元素上，它的背景色就會從白色漸變為紅色。以下是一個過渡效果的示例代碼：

.box {
width: 100px;
height: 100px;
background-color: red;
transition: background-color 1s;
}
.box:hover {
background-color: white;
}

代碼中先設定了一個“box”類，其中定義了元素的寬度、高度、背景色和過渡屬性（transition）。過渡屬性指定了元素屬性值發生變化時，過渡效果所采用的屬性和時間。接著，在:hover偽類中定義了鼠標懸停時改變背景色的效果。