# Using CSS animations instead of JavaScript timers

DevFeed: [Using CSS animations instead of JavaScript timers](<https://devfeed.tech/articles/using-css-animations-instead-of-javascript-timers-37252.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/css-animations-instead-of-js-timers/>)

Author: Stanko

Published: 2023-08-04T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [CSS animations](<https://devfeed.tech/topics/css-animations.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [web animation](<https://devfeed.tech/topics/web-animation.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>)

Tags: [animations](<https://devfeed.tech/tags/animations.md>), [api](<https://devfeed.tech/tags/api.md>), [css](<https://devfeed.tech/tags/css.md>), [css-animations](<https://devfeed.tech/tags/css-animations.md>), [javascript](<https://devfeed.tech/tags/javascript.md>)

## AI overview

This tutorial explains how to build timers with CSS animations and class changes instead of JavaScript timer functions. It covers pausing, resuming, restarting, animation events, repeated timers, chaining timers, and using the approach for an autoplaying carousel. It also notes that precise progress tracking requires the Web Animations API.

## Source excerpt

What if I told you that we can make a timer without using setTimeout, setInterval or requestAnimationFrame? JavaScript is still necessary, but we can create the timer just by toggling some CSS classes. While I was working on an autoplay feature for a carousel, I thought to myself - CSS animations are kinda like timers. They have animationstart and animationend events and an ability to pause them. On top of that, we get the animation loop for free, which we would have to implement manually in JavaScript. Implementation # To make the timer, we'll need four CSS classesPlease note that we could create a minimal example with only two classes (.timer and .timer--running), but it is pretty limiting and therefore we are going to skip it.: .timer - initial styles .timer--running - starts the animation .timer--paused - pauses the animation (can only be used in combination with .timer--running) .timer--done - final state of the animation We'll start a timer by adding a .timer--running class. In the case that we are restarting it, we also need to remove the .timer--done class. // Start the timer $timer.classList.add('timer--running'); // $timer is a reference to the timer's DOM element $timer.classList.remove('timer--done'); To pause it we'll add .timer--paused class. Resume it by removing the class. // Toggle the pause class $timer.classList.toggle('timer--pause'); Once animationend event is triggered, we know the animation is done, so we need to add .timer--done and to remove .timer--running class. // Update classes so the timer can be restarted $timer.classList.add('timer--done'); $timer.classList.remove('timer--running'); When we put it all together, we get a minimal working example: Start / stop Code is also available on CodePen for you to play with. This timer works similarly to setTimeout, but it comes with it's own animation loop and an easy way to pause it. animationiteration # To get a behavior similar to setInterval we are going to switch to animationiteration instea