Animation #keyframe | SoloLearn: Learn to code for FREE!

+2

Animation #keyframe

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?

8/2/2017 6:59:41 AM

Maciej Mazurek

15 Answers

New Answer

+2

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

+1

sorry I don't fully understand...

+1

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

+1

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

0

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.

0

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

0

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

0

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

0

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

0

@Maciej Mazurek ok everything is fixed...

0

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

0

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

0

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

0

@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.

0

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