Animation #keyframe

Question

Hello, I have to make countdown animation from 10 to 1 without JavaScript. What I figure out is to make a div with black background. Under that will be div with 10 paragraphs containing numbers in white. Both div's would be absolute. Background dive with z-index - 1 so number from firs paragraph wil be in top of with. And now I'm stuck... I want to animate with keyframe that div with numbers will move up 10% every 1s outside body so the numbers will change but it doesn't work... Can someone show me the way?

Answer 1

https://code.sololearn.com/WLRJOwd0SlH4/?ref=app Does this help you??

Answer 2

sorry I don't fully understand...

Answer 3

I've edited it a bit, more to suit your needs, but be warned that it messes up a bit, I'm still working on it

Answer 4

Thank you. Now it's much more clear for me. Cheers

Answer 5

I tried that one but 1. Black background width and height has to be still. 2. I forgot to mention that last content has text and it's to big to fit div with black background.

Answer 6

I modify code adding background width and height and I changed 0 to text. As you can see text is to big and it doesnt fit in to div's dimensions.
https://code.sololearn.com/WVR39oo0b6of/?ref=app

Answer 7

I edited Dr_Donko89's answer
https://code.sololearn.com/WKU1NeEq77KL/?ref=app

Answer 8

Thank you for hint. I stll have a problem that instead of content="0" i need to put content="some text" and then text is to big to fit into div

Answer 9

Thank you! When i look at the code it looks so simple right now:-)

Answer 10

@Maciej Mazurek
ok everything is fixed...

Answer 11

Thank you so much! No it's look perfect. Would you be so kind and explain me why content with text has also 50.00001%?? I'm just starting to learn thoes think :-) thank a lot

Answer 12

@Maciej Mazurek
well I wanted it to immediately go to the text after 0 without there being a resizing animation of the text

Answer 13

Yes but i dont understand technically how adding 0001 doing that:-)

Answer 14

@Maciej Mazurek
By going from 50% to 50.00001%, the resizing animation still occurrs but it's so quick that our eyes can't see it. I basically told it to finish that resizing animation in 0.000002 seconds.

Answer 15

https://code.sololearn.com/W47D54z7SmpN/?ref=app