Best Formats for Animation on Websites

There are lots of different ways you can display animation on a website. We prefer CSS (or Cascading Style Sheets), here's why.

By Rog HowPosted in Ideas

Animation is a hugely broad practice and has been around for many years. Fundamentally, animation is a method in which pictures are manipulated to appear as moving images.

Traditionally, animation involved images being drawn or painted by hand on transparent celluloid sheets. These were then photographed consecutively and made into a film. Now, most animations are made using Computer Generated Imagery (CGI). Stop-motion is also another animation technique for representing two and three-dimensional objects like puppets or clay figures.

At Polleni we commission animation from our network of trusted motion designers and digital animators, whose skill-set best reflect a brand. There are lots of different file formats we use to represent this animation: broadly speaking, a 'file format' relates to how the data within an animation file is organised. A program that uses the data in a file must be able to recognise and possibly access data within the file.

Below is a glossary of some of the formats we work with.

  • MP4: is a file format created by the Moving Picture Experts Group (MPEG) as a multimedia container format designed to store audiovisual data.
  • MOV: is a multimedia container file format developed by Apple and compatible with both Macintosh and Windows platforms. It can contain multiple tracks that store different types of media data and is often used for saving movies and other video files.
  • GIF: is an image encoded in Graphics Interchange Format (GIF) which contains a number of images or frames in a single file and is described by its own graphic control extension. The frames are presented in a specific order in order to convey animation. An animated GIF can loop endlessly or stop after a few sequences.
  • Adobe After Effects: is a digital visual effects, motion graphics, and compositing application developed by Adobe Systems and used in the post-production process of film making and television production.It can be used for keying, tracking, compositing and animation.
  • CSS (Cascading Style Sheets): make it possible to animate transitions from one CSS style configuration to another. We use these a lot in our Headless CMS websites. Essentially CSS animations consist of two components: a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.

We tend to lean to CSS animations on the websites we build and develop, wherever possible. This is largely because:

  1. They're flexible and easy to use for simple animations - you create them without even having to know JavaScript. They are also easy to change with just a simple tweaking of code.
  2. The animations are robust and run well, even under moderate system load. Simple animations can often perform poorly in JavaScript (unless they’re well made). The rendering engine of CSS animations can use frame-skipping and other techniques to keep the performance as smooth as possible.
  3. Letting the browser control the animation sequence lets the browser optimise performance and efficiency which ultimately leads to a better browsing experience. This can be done, for example, by reducing the update frequency of animations running in tabs that aren't currently visible.

Find out more about our creative agency.

Need help with your brand?

Start a Project

Let's help your business grow!

Email us

Brand Review

Book in a free brand consultation.

Book now

Join Our Mailing List