+ 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?

2nd Aug 2017, 6:59 AM
Maciej Mazurek
Maciej Mazurek - avatar
15 Answers
2nd Aug 2017, 8:17 AM
Dr_Donko89
Dr_Donko89 - avatar
+ 1
sorry I don't fully understand...
2nd Aug 2017, 8:58 AM
Dr_Donko89
Dr_Donko89 - avatar
+ 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
2nd Aug 2017, 9:45 AM
God Usopp
God Usopp - avatar
+ 1
Thank you. Now it's much more clear for me. Cheers
2nd Aug 2017, 1:20 PM
Maciej Mazurek
Maciej Mazurek - avatar
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.
2nd Aug 2017, 8:41 AM
Maciej Mazurek
Maciej Mazurek - avatar
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
2nd Aug 2017, 9:05 AM
Maciej Mazurek
Maciej Mazurek - avatar
2nd Aug 2017, 9:09 AM
God Usopp
God Usopp - avatar
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
2nd Aug 2017, 9:14 AM
Maciej Mazurek
Maciej Mazurek - avatar
0
Thank you! When i look at the code it looks so simple right now:-)
2nd Aug 2017, 10:03 AM
Maciej Mazurek
Maciej Mazurek - avatar
0
@Maciej Mazurek ok everything is fixed...
2nd Aug 2017, 11:00 AM
God Usopp
God Usopp - avatar
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
2nd Aug 2017, 11:05 AM
Maciej Mazurek
Maciej Mazurek - avatar
0
@Maciej Mazurek well I wanted it to immediately go to the text after 0 without there being a resizing animation of the text
2nd Aug 2017, 11:17 AM
God Usopp
God Usopp - avatar
0
Yes but i dont understand technically how adding 0001 doing that:-)
2nd Aug 2017, 11:45 AM
Maciej Mazurek
Maciej Mazurek - avatar
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.
2nd Aug 2017, 11:56 AM
God Usopp
God Usopp - avatar