CSS3是前端設計中的重要一環，它可以實現多種樣式效果，例如圖片動畫搖擺。下面我們來詳細介紹一下如何使用CSS3實現圖片動畫搖擺。

/*css樣式代碼*/
.img {
transition: transform 0.3s ease-in-out;
}
.img:hover {
transform: rotate(20deg);
transition: transform 0.3s ease-in-out;
}

上述代碼中，我們使用了CSS3的transition屬性和transform屬性來實現圖片動畫的搖擺效果。首先，我們需要在HTML中加入一個圖片的標簽，然后給這個標簽加上一個類，例如我們給它命名為img。

在CSS中，我們首先給這個類加上一個transition屬性，該屬性可以設置元素從有變化到無變化狀態的過渡效果，因此我們讓圖片的搖擺在0.3秒的時間內緩慢進行。

接著，我們使用:hover偽類來控制鼠標懸停在圖片上時的效果。我們通過在transform屬性中設置rotate(20deg)來實現圖片搖擺的效果，同時我們還將transition設置為搖擺狀態下同樣需要0.3秒緩慢進行。

最終，我們通過上述方式來實現了圖片動畫的搖擺效果。這個在前端設計中常用的實現方式不僅能夠為網站增加美觀的效果，同時也能夠吸引用戶的注意力，為網站的流量和用戶體驗帶來提升。