最近，我學習了CSS動畫，嘗試用它讓一片小草抖動起來。下面，我將分享一下我的經驗。

.grass {
width: 200px;
height: 100px;
background-color: #5cb85c;
position: relative;
overflow: hidden;
border-radius: 10px;
}
.grass:before,
.grass:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
background-color: #5cb85c;
transform: translate(-50%, 100%) rotate(45deg);
}
.grass:after {
left: auto;
right: 0;
transform: translate(50%, 100%) rotate(-45deg);
}
@keyframes grass-shake {
0% {
transform: translateX(-5px) rotate(0);
}
50% {
transform: translateX(5px) rotate(0);
}
100% {
transform: translateX(-5px) rotate(0);
}
}
.grass {
animation: grass-shake 2s infinite;
}

首先，我創建了一個類名為“grass”的div，這個div就是整篇小草的主體。然后，我給這個div設置了一些基本樣式，如寬高、背景顏色和圓角等。

接下來，在這個div里創建了兩個偽元素:before和:after，分別設置寬高為0，顏色與小草主體一致，并且通過transform調整它們的位置和角度，模擬出草葉的圖案。

然后，我使用CSS3的關鍵幀動畫@keyframes，創建了一個名為“grass-shake”的動畫。這個動畫會讓小草在X軸上左右晃動。動畫執行時間為2秒，無限循環播放。

最后，我將這個動畫應用到了小草主體上，使用animation屬性指定，讓它開始抖動起來！

這就是我用CSS動畫讓小草抖動的經驗，希望能給大家一些啟示和幫助。