docs : add Animating doc

_posts/docs/2010-12-09-animating.mdown

@@ -0,0 +1,77 @@
+---
+
+title: Animating
+category: docs
+layout: doc
+
+---
+
+Isotope was developed to take advantage of the best browser features available. 
+
+
+## animationEngine
+
+You can control how Isotope handles animation with the `animationEngine` option. This option has three values which control which jQuery method `.css()` or `.animate()` is used to apply styles.
+
++ `'best-available'`: if browser supports CSS transitions, Isotope uses `.css()`. If not, falls back to using `.animate()`.
++ `'css'`: Isotope uses `.css()`
++ `'jquery'`: Isotope uses `.animate()`
+
+## CSS transitions
+
+To enable animation with CSS transitions, you'll need the following code in your CSS:
+
+{% highlight css %}
+
+.isotope,
+.isotope .isotope-item {
+  -webkit-transition-duration: 0.8s;
+     -moz-transition-duration: 0.8s;
+          transition-duration: 0.8s;
+}
+
+.isotope {
+  -webkit-transition-property: height, width;
+     -moz-transition-property: height, width;
+          transition-property: height, width;
+}
+
+.isotope .isotope-item {
+  -webkit-transition-property: -webkit-transform, opacity;
+     -moz-transition-property:    -moz-transform, opacity;
+          transition-property:         transform, opacity;
+}
+
+{% endhighlight %}
+
+## Variations
+
+With these two options you can finely control how animation is handled across browsers.
+
+### Best available (recommended)
+
+Browsers that support CSS transitions will use them. Other browsers will fall back to using jQuery animation.
+
++ **Add** CSS transition declarations
+
+### Always use jQuery
+
+All browsers will use jQuery animation, regardless of their CSS transition support.
+
++ `animationEngine : 'jquery'`
++ **No** CSS transition declarations
+
+Never set `animationEngine : 'jquery'` AND add CSS transition declarations. This will cause double-animation in browser that support CSS transitions — which is a bad thing.
+
+### Only CSS transitions
+
++ `animationEngine: 'css'`
++ **Add** CSS transition declarations
+
+### None
+
+Animation is not enabled in any browser
+
++ `animationEngine : 'css'`
++ **No** CSS transition declarations
+