CSS動畫的效果可以帶來網站的視覺重點，增強用戶體驗，比如說鼠標移上按鈕晃動的效果，可以讓用戶更加容易發現某個頁面上的重要操作。下面我們一起來編寫這樣一個簡單的CSS動畫。

.button{
display: inline-block;
padding: 12px 24px;
font-size: 16px;
color: #fff;
background-color: #337ab7;
border: none;
border-radius: 5px;
transition: transform 0.2s ease-in-out;
}
.button:hover{
transform: translateX(5px) rotate(5deg);
}

首先，我們定義了一個class叫做“button”，代表我們要應用這個樣式到一個按鈕上。我們選擇了inline-block作為樣式的display屬性，這可以讓樣式變得更加有機和自然。我們還定義了一些基礎的樣式，例如padding、字體大小、文字顏色等。

然后，我們為這個按鈕添加了:hover偽類，代表當用戶將鼠標懸停在這個按鈕上時，將會應用我們定義的樣式。在此偽類中，我們定義了按鈕的移動效果，使用了transform屬性來實現它。我們用translateX移動按鈕5像素，在X軸上，這可以使按鈕看起來更具動感，然后我們還在按鈕上添加了5度的旋轉，通過rotate屬性來實現它。效果非常好。

在實踐中，我們可以使用這個樣式來增加按鈕的響應性和動態感，讓用戶輕松地發現頁面上最重要的任務，增強網站的用戶體驗。