JavaScript/CSS animations can be very expensive in terms of CPU power and RAM usage. They all trigger actions such as (re)paint/(re)flow that consume a lot of resources. Thus avoid using animations as much as possible, and only do so when absolutely necessary.
If you must include an animation, only employ the opacity and transform CSS3 properties as well as the related functions: translate, rotate, scale and transform. These two properties are automatically optimized by the browser, and the animation can be handled by the GPU.
You can help the browser minimize the resources consumed by using will-change to warn it that an amination will take place.
The will-change property warns the browser that an animation, which it is capable of optimizing, will be triggered. Used intelligently, this approach will consume less resources.
.box {
will-change: transform, opacity;
}
To learn more:
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations
http://developers.google.com/web/fundamentals/look-and-feel/animations/animations-and-performance