Question

animate(properties, [duration, [easing, [function(){ ... }]]])   ⇒ self  animate(properties, { duration: msec, easing: type, complete: fn })   ⇒ self  animate(animationName, { ... })   ⇒ self
  

对当前对象集合中元素进行css transition属性平滑过渡。

• properties: 一个对象，该对象包含了css动画的值，或者css帧动画的名称。
• duration (默认 400)：以毫秒为单位的时间，或者一个字符串。
  • fast (200 ms)
  • slow (600 ms)
  • 任何$.fx.speeds自定义属性
• easing (默认 linear)：指定动画的缓动类型，使用以下一个：
  • ease
  • linear
  • ease-in / ease-out
  • ease-in-out
  • cubic-bezier(...)
• complete：动画完成时的回调函数
li>delay: 以毫秒为单位的过度延迟时间 v1.1+

Zepto 还支持以下 CSS transform 属性：

• translate(X|Y|Z|3d)
• rotate(X|Y|Z|3d)
• scale(X|Y|Z)
• matrix(3d)
• perspective
• skew(X|Y)

如果duration参数为 0 或 $.fx.off 为 true(在不支持css transitions的浏览器中默认为true)，动画将不被执行；替代动画效果的目标位置会即刻生效。类似的，如果指定的动画不是通过动画完成，而且动画的目标位置即可生效。这种情况下没有动画， complete方法也不会被调用。

如果第一个参数是字符串而不是一个对象，它将被当作一个css关键帧动画 CSS keyframe animation的名称。

$("#some_element").animate({    opacity: 0.25,    left:    '50px',    color:    '#abcdef',    rotateZ:    '45deg',    translate3d: '0,10px,0'    }, 500,    'ease-out')

Zepto只使用css过渡效果的动画。jquery的easings不会支持。jquery的相对变化("=+10px") syntax 也不支持。请查看 list of animatable properties。浏览器的支持可能不同，所以一定要测试你所想要支持的浏览器。