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?

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?

• javascript

2 Answers 2

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);

Zepto also supports the following CSS transform properties:

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

(http://zeptojs./#animate)

They seem to be prefixed like this:

vendors = { Webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' },