joelmturner pyramid logo

About

Blog

Illustration

TIL

Uses

About

Blog

Illustration

TIL

Uses

Animated CSS Timer Icon

I recently had a need for a timer/revert icon that can animate forward and backward.

Pure CSS

I wanted it to be a purely CSS and HTML versus an animated SVG or GIF so it can be manipulated more easily in the browser.

Adjustable Size

The size of the icon is relative to the wrapper so setting a different font-size will scale the icon proportionally.

Animation in Multiple Directions

The icon needs to animate forward and backward as well as have a rest state. The animation uses CSS keyframes based on the classes, 'forward' and 'backward'.

CSS Timer Icon

CSS Timer Icon as React Component


Discuss this article on Twitter

Category:

dev

© 2012-2023, built with Next.js and Chakra UI

InstagramtwitterlinkedIngithubjoelmturner's DEV Profilejoelmturner's Mastodon Profile