动画效果优化——使用transform属性

js动画效果优化

做了个动画效果，使用jquery使四个div间隔200ms依次的做上移运动，且透明度递增。

初试代码如下：

初始化：

  $(".introduce").css("top","100px").css("opacity","0");

动画

$(".culture").eq(0).animate({top:0,opacity:1},500);
    $(".culture").eq(1).delay(200).animate({top:0,opacity:1},500);
    $(".culture").eq(2).delay(400).animate({top:0,opacity:1},500);
    $(".culture").eq(3).delay(600).animate({top:0,opacity:1},500);

然而运行效果差强人意，卡顿现象严重。

网上查阅资料得知jquery动画性能并不好，于是引入了Velocity.js。Velocity.js是轻量级的动画库，动画流畅度要优于jquery

Velocity.js使用动画的方式与animate()方法相似：

$(".culture").eq(0).velocity({top:0,opacity:1},500);
    $(".culture").eq(1).delay(200).velocity({top:0,opacity:1},500);
    $(".culture").eq(2).delay(400).velocity({top:0,opacity:1},500);
    $(".culture").eq(3).delay(600).velocity({top:0,opacity:1},500);

然而动画效果依旧卡顿

最后终于找到原因，原因出在css上：使用top、margin等方式做动画时，浏览器渲染动画的工作量更大，单个动画可能不会发觉，因为这里使用了delay方法，卡顿现象就非常明显了。

使用transform属性的translate(x,y)替代top实现平移效果可以解决这个问题

“transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。”

    $(".culture").eq(0).velocity({transform:"translate(0,0)",opacity:1},500);
    $(".culture").eq(1).delay(200).velocity({transform:"translate(0,0)",opacity:1},500);
    $(".culture").eq(2).delay(400).velocity({transform:"translate(0,0)",opacity:1},500);
    $(".culture").eq(3).delay(600).velocity({transform:"translate(0,0)",opacity:1},500);

效果：