Question

I’m investigating Zepto.js for a mobile project but not finding much documentation on the .anim action. I know it is webkit specific but which parts of the webkit animation css does it work with? For example, 3d transforms?

Answer 1

From the source you can see, that it uses -webkit-transform internally, so everything that is available with it can be used.

translate3d

$('div').anim({ translate3d: '10px, 20px, 30px'}, 2, 'ease-out');

Zepto.Fx

(function($){
  $.fn.anim = function(props, dur, ease){
    var transforms = [], opacity, k;
    for (k in props) 
        k === 'opacity' ? opacity=props[k] : transforms.push(k+'('+props[k]+')');
    return this.css({ '-webkit-transition': 'all '+(dur||0.5)+'s '+(ease||''),
      '-webkit-transform': transforms.join(' '), opacity: opacity });
  }
})(Zepto);