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

css-transition和transform实现图片悬浮移动动画

推荐阅读