CSS Animation

CSS Animation – Web Animation

Web animations can be helpful and, yes, sometimes plain annoying, but usually super fun. Let’s explore its history and evolution in this article.

Pyxofy

Feb 12, 2023 • 8 min read

Photo by Deeksha Pahariya / Unsplash

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.

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.

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, released in 1999, is one of the first animated feature film produce with Flash.

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.

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.

HTML Living Standard is managed by WHATWG.
CSS standard specification is maintained by W3C.
JavaScript is based on ECMAScript Language Specification (ECMA-262) and ECMAScript Internationalization API specification (ECMA-402). Both standards maintained by Ecma International.
WebGL, a JavaScript API that draws interactive 2D and 3D graphics, is maintained by Khronos Group. WebGL is based on OpenGL ES 2.0.

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.

Tweet this article!

Share on LinkedIn