docs : add recommended CSS in intro and adding items

_posts/docs/2010-12-01-introduction.mdown

@@ -67,6 +67,56 @@ $('#container').isotope({
 
 There are a number of [options](options.html) you can specify.  Within the options is where you can [set the layout mode](layout-modes.html), [filter items](filtering.html),  and [sort items](sorting.html).
 
+### CSS
+
+Add these styles to your CSS for [filtering](filtering.html), [animation](animating.html) with CSS transitions, and [adding items](adding-items.html).
+
+{% highlight css %}
+
+/**** Isotope Filtering ****/
+
+.isotope-item {
+  z-index: 2;
+}
+
+.isotope-hidden.isotope-item {
+  pointer-events: none;
+  z-index: 1;
+}
+
+/**** Isotope CSS3 transitions ****/
+
+.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;
+}
+
+/**** disabling Isotope CSS3 transitions ****/
+
+.isotope.no-transition,
+.isotope.no-transition .isotope-item,
+.isotope .isotope-item.no-transition {
+  -webkit-transition-duration: 0s;
+     -moz-transition-duration: 0s;
+          transition-duration: 0s;
+}
+
+{% endhighlight %}
+
 ## Code repository
 
 This project lives on GitHub at [github.com/desandro/isotope](http://github.com/desandro/isotope). There you can grab the latest code and follow development.

_posts/docs/2010-12-10-adding-items.mdown

@@ -8,6 +8,7 @@ toc:
   - { title: insert method, anchor: insert_method }
   - { title: appended method, anchor: appended_method }
   - { title: Prepending, anchor: prepending }
+  - { title: Recommended CSS, anchor: recommended_css }
 
 ---
 
@@ -56,3 +57,21 @@ $('#container').prepend( $newItems)
   .isotope( 'reloadItems' ).isotope({ sortBy: 'original-order' });
 
 {% endhighlight %}
+
+## Recommended CSS
+
+You'll need these styles in your CSS for the reveal animation when adding items.
+
+{% highlight css %}
+
+/**** disabling Isotope CSS3 transitions ****/
+
+.isotope.no-transition,
+.isotope.no-transition .isotope-item,
+.isotope .isotope-item.no-transition {
+  -webkit-transition-duration: 0s;
+     -moz-transition-duration: 0s;
+          transition-duration: 0s;
+}
+
+{% endhighlight %}