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

---

title: Animating
category: docs
layout: doc
related: animating

---

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