CSS動畫是一種通過在HTML元素上添加CSS屬性來控制動畫效果的技術。在實現動畫效果時，我們需要考慮到不同瀏覽器對CSS動畫的支持情況。以下是一些常用的CSS動畫兼容寫法：
1. 使用animation-name和animation-duration屬性
我們可以使用animation-name和animation-duration屬性來定義CSS動畫。例如，我們可以使用以下代碼創建一個旋轉的CSS動畫：
```css
@keyframeskeyframes_spin {
0% {
transform: rotate(0deg);
100% {
transform: rotate(360deg);
在上面的代碼中，我們使用@keyframes標記來定義動畫，并為每個動畫狀態設置一個唯一的animation-name屬性。然后，我們使用animation-duration屬性來指定動畫的持續時間，例如：
```css
@keyframeskeyframes_spin {
0% {
transform: rotate(0deg);
100% {
transform: rotate(360deg);
animation-name: spin;
animation-duration: 1s;
在上面的代碼中，我們使用animation-name屬性來指定動畫的名稱，然后使用animation-duration屬性來指定動畫的持續時間，為1秒。
2. 使用animation-iteration-count和animation-direction屬性
我們可以使用animation-iteration-count和animation-direction屬性來定義CSS動畫的迭代次數和方向。例如，我們可以使用以下代碼創建一個水平的CSS動畫：
```css
@keyframeskeyframes_spin {
0% {
transform: rotate(0deg);
100% {
transform: rotate(360deg);
animation-name: spin;
animation-iteration-count: infinite;
animation-direction: both;
在上面的代碼中，我們使用animation-iteration-count屬性來指定動畫的迭代次數，為無限次。然后，我們使用animation-direction屬性來指定動畫的方向，為 both。
3. 使用CSS3中的transform-origin屬性
我們可以使用CSS3中的transform-origin屬性來定義CSS動畫的起點和終點。例如，我們可以使用以下代碼創建一個垂直旋轉的CSS動畫：
```css
@keyframeskeyframes_spin {
0% {
transform: rotate(0deg);
transform-origin: top left;
100% {
transform: rotate(360deg);
transform-origin: top left;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: infinite;
在上面的代碼中，我們使用transform-origin屬性來指定動畫的起點和終點，分別為top left和bottom right。
通過使用上述CSS動畫兼容寫法，我們可以在不同的瀏覽器中實現流暢的CSS動畫效果。