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.
I am trying to figure out if there is a way to synchronize them and not be two separate things.
Is there an easiest way?
Maybe chaning the number with css animation? But I am not sure about that.
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.
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.
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.
Wow thanks I will try them, they look awesome!!
Thank you very much
And just for fun a css version that does work in Safari (and other modern browsers)/.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.