CSS animation for a counter

HTML & CSS
1

Hi :slight_smile:

I am trying to make an animation that it will change the background color from bottom to top and also there will be a counter that it will go from 0 to 100.

This concept could be used for a pre-loader screen.

The problem is that I have change the background color with CSS animations.
But for the counter I need javascript.
So these two, even if I make them both 5 seconds in duration, the css animations starts at different timing when the page loads and the javascript on another timing, so they do not finish together.

I am trying to figure out if there is a way to synchronize them and not be two separate things.

I have tried to change the color of the background with the javascript too, so both will be increased together, but then the transition is not smooth.

Is there an easiest way?

Maybe chaning the number with css animation? But I am not sure about that.

2

You could make the css animation start by adding a class with JS at the same time as you start your counter.

Css timing may vary from the JS timing by a little bit but it depends on how accurate it needs to be.

Or depending on use case you could animate a counter in css but JS is probably still best for that.

1 Like
3

Just for fun here’s a css only version (won’t work in Safari and probably ios):

The countdown should really be in JS but it may serve for something simple.

3 Likes
4

Here’s a JS version for the counter and a class added via js to start the css animation.

And here’s a version using js for everything. :slight_smile:

1 Like
5

Wow thanks I will try them, they look awesome!!

Thank you very much :slight_smile: :slight_smile:

1 Like
6

And just for fun a css version that does work in Safari (and other modern browsers)/.

Enjoy :slight_smile:

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.