This document compares different techniques for animating websites in 2017, including CSS animations, SVG, GIFs, HTML5 video, and JavaScript-powered SVG animations. It evaluates each approach based on factors like fidelity, browser compatibility, performance, and ease of implementation. CSS animations are recommended as the lightest weight option that provides good fidelity and compatibility while maintaining performance. More complex animations may require heavier techniques like SVG or JavaScript that offer more control but with added development effort.

1. Web Animation
Techniques for 2017
A Comparison

2. Assumptions
• You don’t want animations to slow down your website
• You want it to work for as many people as possible
• You want the code to be maintainable
• You are most likely using React, in 2017

3. Considerations
• Fidelity: How good does the animation look?
• Browser Compatibility: How many people can see it?
• Performance: How does it affect the speed of the website?
• Ease of Implementation: How easy is it to create and maintain?

4. Approaches
CSS animations
with HTML
CSS animations
with SVG
GIF animation HTML5 video SVG animation
with Javascript
Lightweight Mediumweight Heavyweight

5. Lightweight Approaches
with CSS

6. CSS animations
with HTML
CSS animations
with SVG
“CSS animations has had a bit of a
resurgence lately likely because it’s the
easiest way to go for animations in React.
In terms of real-world animations on the
web, sometimes CSS is Occam’s Razor.”
– Sarah Drasner, author of “SVG Animations”

7. CSS animations
with HTML
• Fidelity: Only the most basic animations can be
achieved, but the animation scales to any screen size.
• Browser Compatibility: The most widely-supported. If
CSS animation isn’t supported by a browser, it
degrades gracefully to a static image.
• Performance: Because it’s just code, the animation is
very lightweight and doesn’t impact loading times.
• Ease of Implementation: Easy to implement and
maintain. Recommended for use with React.

8. CSS animations
with SVG
• Fidelity: SVG allows for more control over graphics and
the animation scales to any screen size
• Browser Compatibility: Both CSS animation and SVG
are widely supported
• Performance: Because it’s just code, the animation is
very lightweight and doesn’t impact loading times
• Ease of Implementation: Browser inconsistencies may
require some development effort to address.
Recommended for use with React.

9. Mediumweight Approaches
with GIF

10. GIF Animation
• Fidelity: Extensive control over graphics and effects, but there
is no control over playback. It comes in a fixed size.
• Browser Compatibility: The oldest image format on the web.
You won’t run into compatibility issues with it
• Performance: It’s a performance nightmare. The team that
built Safari found that “GIFs can be up to twelve times as
expensive in bandwidth and twice as expensive in energy use.
It’s so expensive that many of the largest GIF providers have
been moving away from GIFs and toward the <video> element.”
• Ease of Implementation: Requires pre-production by
designers, changes cannot be made in code.

11. Heavyweight Approaches
with Javascript or Video

12. HTML5 Video
• Fidelity: Extensive control over graphics, sequencing,
and effects, but no control over timing beyond playing
and pausing. It comes in a fixed size.
• Browser Compatibility: Video is widely supported but
control over playback on mobile is limited
• Performance: Video files, even compressed, will make
a significant impact on loading times
• Ease of Implementation: Requires pre-production by
designers, changes cannot be made in code. Requires
custom video hosting to be used as part of the UI.

13. SVG animation
with Javascript
• Fidelity: Complete control over every aspect of the
animation including sequencing, timing, scale.
• Browser Compatibility: Browser support varies
depending on Javascript library used
• Performance: Additional Javascript code will make a
slight impact on loading times and might slow down
some low-end devices
• Ease of Implementation: Requires considerable effort
to implement, especially with React, as there are no
out-of-the-box solutions.

14. References
• CSS-Tricks, SVG Animation and CSS Transforms: A Complicated
Love Story. https://css-tricks.com/svg-animation-on-css-transforms/
• Sarah Drasner, A Comparison of Animation Technologies. https://css-
tricks.com/comparison-animation-technologies/
• Rachel Nabors, Web Animation Past, Present, and Future. https://
alistapart.com/article/web-animation-past-present-and-future
• Webkit Blog, New <video> Policies for iOS. https://webkit.org/blog/6784/
new-video-policies-for-ios/