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

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

貌似很簡單，本身作作試試吧

我首先使用的是jquery在鼠標懸浮到圖片上給圖片增長一個類，這個類的樣式使用animation實現動畫效果。表面上是實現了，而後實際狀況是，滾動頁面時有些卡，應該是滾動時鼠標通過N個圖片，大量的DOM操做嚴重消耗性能，因此仍是採用了僞類hover，給hover應用樣式實現動畫。並且簡單的移動使用animation有些複雜，利用transform和transition徹底就夠了。

一、：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);
}

二、移動完成後，發現鼠標移走後，圖片馬上回了原地，這樣不太好……因此直接把過渡樣式加入到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