一、效果預覽

如圖所示，滑鼠移動上去，圖片會向右上角抖動，滑鼠離開，圖片恢復原狀。

二、方案選擇

剛剛接觸到這個效果的時候，我還以為是採用放大效果來實現的，即scale:1.2諸如此類的程式碼，結果不然。

這個效果的實現，如果採用jquery的方案，直接寫個動畫即可。

//先設定好position:relative;
$('img:hover').animate({'left':'10px','bottom':'10px'});

假如追根溯源，還是使用的CSS3的動畫。
首先自定義一個動畫：

@keyframes testAnimate{

from{position: relative
 
;bottom: 0;left: 0;}

to{position: relative;bottom: 20px;left: 30px;border: 5px solid #999;}

}

這個動畫定義了一個名為：testAnimate的位置過渡動畫，從相對位置(0,0)，變到相對位置 (30px,20px)，且終態時，增加了一個5px的邊框。

接著，我們在測試的圖片用例上來引入動畫：

img:hover{
animation:testAnimate 1s;
-webkit-animation:testAnimate  1s;
-moz-animation:testAnimate  1s;
-o-animation
 
:testAnimate  1s;
-ms-animation:testAnimate 1s;
}
//整個動畫1s完成，並設定了瀏覽器相容

效果如下：

可能在網頁上顯示的不盡人意，這裡面存在一個問題，當滑鼠移入圖片，並且懸停不動時，圖片會自動回覆到動畫之前的狀態，這就感覺像拖動一個東西，拖到一半，東西自己滑走了，好在CSS3裡面有了現成的解決方案：

img:hover{
animation-fill-mode: forwards;
-ms-animation-fill-mode:forwards;//相容IE  xxxxxx  
-webkit-animation-fill-mode:forwards;//相容Chrome xxxxxx
 

-moz-animation-fill-mode:forwards;//相容FireFox xxxxx
-o-animation-fill-mode:forwards;//相容opear xxxxxx
}

這樣，當滑鼠移入，只要不鬆開，圖片就會停留在動畫的100%狀態，而不會回滾到動畫為0%的狀態；當滑鼠移出圖片，動畫結束，方回到初始狀態。

三、分析歸納

眾所周知，jquery封裝的js庫，其中的動畫部分來源於CSS3，作為原生的CSS，其功能不可小覷，而且相當於jquery的實現方法，這種方法定義起來更加的個性化，而且不用引入額外的js庫，很省頻寬。但缺點就是相容性差，比起第三方封裝的Animation.js庫，相容性不行

預覽效果參見：news.lanzhou.cn/system/2017/12/29/011485365.shtml 其中的【微說圖解】欄目。