花瓶是我們家里經常放置鮮花的容器之一，如果能夠添加一些動畫效果，不僅能讓花瓶更加動態化，還能讓空間更加生動活潑。CSS3中的動畫效果相較于傳統的JavaScript動畫，更加簡單可控，下面就來介紹一下如何通過CSS3實現一個花瓶的動畫吧！

/* HTML代碼 */
/* CSS樣式 */
.vase {
width: 200px;
height: 300px;
border: 10px solid #000;
border-radius: 50% 50% 0 0;
position: relative;
margin: 50px auto;
animation: vase 2s forwards;
}
/* 動畫樣式 */
@keyframes vase {
0% {
transform: rotate(0deg);
top: 0;
}
20% {
transform: rotate(-15deg);
top: 50px;
opacity: 1;
}
30% {
transform: rotate(15deg);
}
35% {
transform: rotate(0deg);
}
50% {
transform: rotate(-5deg);
}
55% {
transform: rotate(5deg);
}
60% {
transform: rotate(-5deg);
}
65% {
transform: rotate(5deg);
}
70% {
transform: rotate(-5deg);
}
75% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
85% {
transform: rotate(5deg);
}
90% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
top: 0;
opacity: 1;
}
}

以上代碼中，先使用CSS樣式繪制了一個花瓶的基本形狀，其中使用了邊框、圓角、定位等屬性。接著利用animation屬性向其中添加動畫，并指定了動畫名稱（vase）、持續時間（2s）、播放結束后的狀態（forwards）。動畫效果通過@keyframes創建一個關鍵幀集合來實現，其中指定動畫在各個時間點的狀態，通過transform、top和opacity等屬性來實現旋轉、移動和透明度的變化。最后，我們得到一個能夠模仿花瓶搖擺的動畫效果。