CSS3移動端動畫效果是當今網頁設計界的熱門話題。CSS3作為一種廣泛應用的Web語言，一直以來都是設計師與開發者們關注的焦點之一。隨著移動設備的日益普及，移動端的瀏覽器也越來越多，因此我們需要熟悉一些CSS3動畫效果，來吸引和留住移動端用戶。

/*定義一個旋轉的動畫*/
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*將旋轉應用到圖片中*/
img {
animation: rotate 3s infinite linear;
}

上面這段代碼展示了一個CSS3動畫的例子。它首先定義了一個名為“rotate”的動畫，其中0％的設置將圖像旋轉0度，100％的設置將圖像旋轉360度。然后，如果將此動畫應用于圖像，圖像將在3秒內完成不斷旋轉的動畫。

/*定義一個抖動的動畫*/
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
/*將抖動應用到按鈕上*/
button {
animation: shake 1s cubic-bezier(.36, .07, .19, .97) infinite;
}

上面這段代碼展示了另一個CSS3動畫的例子，它展示了如何在按鈕中創建一個帶有抖動效果的動畫。它首先定義了一個名為"shake"的動畫，其中的關鍵幀將按鈕在各種方向上抖動。然后，將此動畫應用于按鈕，并使用"cubic-bezier"指定了一個相對平穩的動畫效果。

通過了解CSS3動畫的不同類型和屬性，我們可以給移動端網站或應用程序帶來生動的動態效果，從而增強用戶體驗。