add .anim

README

@@ -27,6 +27,8 @@ Supported element functions:
   html('new html'): set the contents of the element(s)
   css('css properties'): set styles of the element(s)
   append, prepend: like html, but append or prepend to element contents
+  anim(transform, opacity, duration):
+    use -webkit-transform/opacity and do an animation
 
 Event handlers ("live" events):
 

examples/anim.html

@@ -0,0 +1,7 @@
+<div style="width:100px;height:100px;border:1px solid black">HELLO WORLD</div>
+
+<script src="../zepto.js"></script>
+
+<script>
+  $('div').anim('rotate(720deg)', 0.5, 10);
+</script>

zepto.js

@@ -21,6 +21,10 @@ $.fn = {
   css: function(style){
     return $(function(el){ el.style.cssText += ';'+style });
   },
+  anim: function(transform, opacity, dur){
+    return $.fn.css('-webkit-transition:all '+(dur||0.5)+'s;'+
+      '-webkit-transform:'+transform+';opacity:'+(opacity===0?0:opacity||1));
+  },
   live: function(event, callback){
     var selector = $._;
     document.body.addEventListener(event, function(event){