Blog

When it comes to creating animations on the web, there are two primary ways: CSS and JavaScript. Most basic animations can be created with either one, but the amount of effort and time can usually differ quite a bit. They each have their pros and cons, but these are some good reasons to help you make a decision on which one can fit your needs:

Using CSS

1. Good to use when you have smaller, self-contained states for UI elements.
2. CSS transitions and animations are ideal for bringing a navigation menu in from the side or showing a tooltip. JavaScript could end up being required to control the states, but the animations themselves will be in your CSS.
3. There are preprocessors (like Less or Sass) that allow you to create variables (for things like easing functions or timings) that you would like to stay consistent, along with :nth-child pseudo classes in functions to produce staggering effects.
4. It does not require an external library.
5. Easy to use for responsive development because you are able to modify your animation with media queries.

Using JavaScript

1. Good to use when you need significant control over your animations.
2. Creating animations with JavaScript is, by comparison, more complex than writing CSS transitions or animations, but provides developers significantly more power and flexibility.
3. The Web Animations API is the standards-based approach, available today in Chrome and Opera. This provides real objects, ideal for complex object-oriented applications.
4. When using JavaScript animations, you're in complete control of an element's styles at every step.This means you are in control when you need to stop, pause, slow down, reverse or manipulate any elements as needed.
5. There are several JavaScript libraries you can use for animations from jQuery to VelocityJS to GreenSock. These can be used based on your preference along with what library you are comfortable using and what fits your particular needs.

As you can see there are uses for both CSS and JavaScript animations, however, which one you choose really depends on the dependencies of your project, and the kinds of effects you are ultimately attempting to accomplish. Remember:

1. Use CSS animations for simpler "one-shot" transitions, like toggling UI element states. This is easier to use than JavaScript while still allowing you to make some impressive animations from the users’ point of view.
2. Use JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind, or slow down. This also gives you much more control than using CSS.

For good references and examples, check out the following links:

https://alistapart.com/article/web-animation-past-present-and-future

http://www.pixelstech.net/article/1437723859-CSS-Animation-vs-JavaScript%3A-Which-One-Is-Better

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API