CSS Animation – Web Animation

Introduction

Web animations are everywhere on the internet. Buttons that change color when you hover over it. Loader icons, direction giving arrows to catch our attention and don’t forget the super flashy banner ads.

In this article we'll dive in to the early days of web animation, the rise and fall of Flash and how open web standards power the internet.

Animated GIF

The Graphics Interchange Format, more commonly known as the GIF, is a bitmap image format used widely on the internet. Most modern applications and operating systems provide robust support for GIF.

GIF was developed by a team in CompuServe, an American online service provider (ISP), in 15 June 1987. It supports animations and provides 256 color for each animation frame.

GIF is used widely for simple images like logos with solid areas of color, and graphics. Photographs and images with gradients are not well-supported by GIF. Because of the 256 color palette limitation, they become very pixelated.

Let’s take a look at some GIF animation examples.

Newton's cradle animation - Wikipedia

Simple, looping animations are a good use case for GIF.

More sophisticated logo animations can be done in GIF as well. Below is a logo animation for Swedish multinational IKEA.

Ikea Animated Logo

Image source

Here’s another great logo animation sequence for American multinational technology company Google.

Google Animated Logo

Image source

Similar to the Newton’s cradle animation, below is a dog character animation that combines static sections and animated parts.

Dog Character Animation

Image source

Designs with solid colors performs the best with GIF format. Most modern graphics and animation application can export GIFs.

In the next section, let’s talk about Flash animation.

Flash Animation

We can’t talk about web animation without Flash animation. Flash revolutionized web applications and animations.

Flash, originally released as FutureSplash Animator by FutureWave Software in May 1996, was a vector graphics and animations application. FutureWave was bought by Macromedia in December 1996, which was in turn acquired by Adobe Systems in 2005.

Before Flash, the only way to deploy reliable web animation was through the use of Java programming language.

Flash was rebranded to Adobe Animate on February 8, 2016. It still supports the Flash (.swf) and Air(.air) formats but has pivoted to web-standard file formats.

Numerous animated films and television series were produced wholly or in part with Flash.

Puss In Boots, DVD Cover

Puss in Boots, released in 1999, is one of the first animated feature film produce with Flash.

Bugs Bunny Builders Poster

Bugs Bunny Builders

Based on Warner Bros. Looney Tunes character franchise, the series aired on July 25, 2022 on Cartoon Network.

Flash Games

Flash was a popular tool to make online games. Colloquial called as browser games or a “flash game”, they are mostly free-to-play video games and can be single-player or multiplayer.

Most browsers have deprecated support for Flash Player. Adobe officially shut down Flash Player on December 31, 2020.

The BlueMaxima’s Flashpoint web game preservation project, not limited to Flash, has a collection of over 150,000 games and 25,000 animation running on 71 different platforms.

Former Apple CEO, Steve Job’s “Thoughts on Flash” open letter may have influenced the rapid decline of Flash.

Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low-power devices, touch interfaces and open web standards – all areas where Flash falls short.

New open standards created in the mobile era, such as HTML5, will win on mobile devices (and PCs too). Perhaps Adobe should focus more on creating great HTML5 tools for the future, and less on criticizing Apple for leaving the past behind.

Pyxofy Membership Sign Up

Open Web Standards

The modern web and the web technologies that web developers build upon are open standards. Standards bodies create these web standards. The standards are long technical documents called specifications that detail how the technology should work. The specifications are used by software engineers to implement the technologies, usually in web browsers.

Different standard bodies manage different web standards. Standard bodies are comprised of individuals from different technologies companies. It’s a consensus-based body, working together and agreeing on how the technologies should work in the best way to fulfill all of their use case.

Let’s explore some standard-based tools we can use to create web animation.

Canvas API

The Canvas API focuses largely on 2D graphics. Through the combination of HTML <canvas> element and JavaScript, Canvas API provides a robust tool for drawing graphics for the web. These graphics can be used for animation, video game graphics, real-time video processing, data visualization and photo manipulation.

Below are in-depth guides and tutorials on how to use the Canvas API.

Web Animations API

The Web Animations API (WAAPI) fills the gap between declarative CSS animations, transitions, and dynamic JavaScript animations. It provides JavaScript developers access to the web browser’s animation engine, enabling the developer to describe how animation should be implemented across browsers.

WAAPI can be used to create and manipulate CSS-like animations that go from one pre-defined state to another. We can use variables, loops and myriad callbacks, creating interactive animations that adapt and react to user inputs.

Below are Web Animations API demo pages, including source code.

Third-Party Animation Libraries

There are multiple third-party JavaScript animation libraries to choose from. These libraries cover basic, CSS style animations all the way to 3D style, high-fidelity motion graphics.

  • Velocity.js
    Velocity.js combines the best of jQuery and CSS transitions. Velocity uses its animation stack, replacing all instances of jQuery’s $.animate() with velocity $.animate() to boost performance across all browsers and devices, especially on mobile.
  • Theatre.js
    Theatre.js is an animation library for high-fidelity motion graphics. Theatre.js is a work-in-progress design tool suitable for creating any animations from simple UI interactions to complex cinematic scenes
  • Anime.js
    Working from a single powerful API, you can use Anime.js to animate HTML, CSS, JS, SVG and DOM attributes. With a built-in staggering system, it can make creating ripples, directional movements, follow-through and overlapping effects appear simple.
  • GreenSock
    GreenSock’s GSAP works with a set of small JavaScript files that make animations look great in all major browsers. It smoothly chains multiple animation properties and eliminates browser bugs.
  • Three.js
    Three.js is helpful in creating scenes, lights, shadows, materials, textures and more. It’s dependent on WebGL to create and render 3D animations in the browser. It helps you do stuff that you’d have to code if you were using WebGL.

CSS animations

The CSS animations module enables you to animate the value of CSS properties. By using keyframes, CSS properties such as background-position and transform can be animated. Other CSS properties such as duration, number of repetitions, delayed start can be controlled by CSS animations module.

Below are three key advantages to CSS animations over traditional script-driven animation techniques from Mozilla Developer Network (MDN):

1. They're easy to use for simple animations; you can create them without even having to know JavaScript.

2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine 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 optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.

Here’s a couple of CSS animation demos.

Opening Envelope

See the Pen Animated CSS Mail Button by Jake Giles-Phillips (@jakegilesphillips) on CodePen.

Coffee Machine

See the Pen Coffee Machine Pure CSS Animation by Henrique Rodrigues (@hjdesigner) on CodePen.

Candles

See the Pen Funny Candle Pure CSS Animation by Kevin David (@kevin_David_k) on CodePen.

Snow Globe

See the Pen Christmas Snow Globe Animation by Coding Artist (@Coding-Artist) on CodePen.

Conclusion

In this article we have seen different tools, both proprietary and open source, to produce animations for the web.

In the early days, we had GIF. Flash dominated the web animation, online application, and web game scene for a long while, but eventually got replaced by technologies based on open web standards.

These are exciting times. In our fingertips, we have open web standards, such as HTML, JavaScript, and CSS to unleash our creativity, freely over the World Wide Web.

“The original idea of the web was that it should be a collaborative space where you can communicate through sharing information.” ― Tim Berners-Lee

What animations idea do you have and which animation tool will you use to create it? Share them with us on Twitter @pyxofy, on LinkedIn, Mastodon or Facebook.

We hope you liked this article. Kindly share it with your network. We really appreciate it.

CSS Animation – What is Animation
Everyone loves animation! Let’s explore how animation works. When was it invented, who invented it and the science behind it in this article.
Scratch Programming ebook for Beginners - 入門
スクラッチ初心者の方へ向けた内容を ebook にまとめました。スクラッチの基本から簡単なスクリプト(プログラム)の作り方まで、全108ページ。ぜひダウンロードしてご活用ください。
JavaScript プログラミングを始めよう
JavaScript(ジャバスクリプト)は、私たちが日常的に利用しているウェブサイトやウェブアプリなどで使われているプログラミング言語です。プログラミング初心者の方へ向けて、JavaScript について簡単に紹介します。
CSS Art - How to Make a Game Character - Super Mario
A plumber jumping in and out of pipes, throwing fireballs while rescuing a princess. Step-by-step article to create a world renowned game character.