css-transition和transform實現圖片懸浮移動動畫

今天在京東首頁上看到一個效果，鼠標懸浮在圖片上時，圖片發生移動，鼠標移走時再移回，並且有一個過渡效果。

貌似很簡單，自己做做試試吧

我首先使用的是jquery在鼠標懸浮到圖片上給圖片增加一個類，這個類的樣式使用animation實現動畫效果。表面上是實現了，然后實際情況是，滾動頁面時有些卡，應該是滾動時鼠標經過N個圖片，大量的DOM操作嚴重消耗性能，所以還是采用了偽類hover，給hover應用樣式實現動畫。而且簡單的移動使用animation有些復雜，利用transform和transition完全就夠了。

1、：hover樣式，我這里把moveleft應用到了圖片的上層li元素。效果是水平方向向左10px，0.4s完成。注意在transform里，坐標代表left和top。

.moveleft:hover img{
    -webkit-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    transform: translateX(-10px);
}

2、移動完成后，發現鼠標移走后，圖片立刻回了原地，這樣不太好……所以直接把過渡樣式加入到img聲明中（：hover里的transition聲明可以刪除），這樣圖片就可以0.4s回到原地了~

.findbrandrank-list-brand-content-list li img{
    -webkit-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

 

關鍵時刻還是得靠W3school http://www.w3school.com.cn/cssref/pr_transform.asp