+ 3

The animation isn't working as expected. Please help...

MY CODE: <!DOCTYPE html> <html> <head> <title>Page Title</title> <style> .loader-1 { display: inline-block; background-color: black; color: black; height: 100; width: 10; animation: heightchange 2s linear infinite; } #line-1 { animation-delay: 0s; } #line-2 { animation-delay: 0.5s; } #line-3 { animation-delay: 1s; } #line-4 { animation-delay: 1.5s; } @keyframes heightchange { 0% {height: 100} 50% {height: 50} 100% {height: 100} } </style> </head> <body> <div id="line-1" class="loader-1"></div> <div id="line-2" class="loader-1"></div> <div id="line-3" class="loader-1"></div> <div id="line-4" class="loader-1"></div> </body> </html> -------------------------- I don't want the bars jumping. I tried everything I know, but it still doesn't work. Please help. Thanks! [P.S: Run the code and see.]

html css animation error help coding thanks!notworking please-help

27th Jun 2018, 2:20 PM

Siddharth

6 Answers

+ 4

Added some properties of CSS: position : for a self-defined position bottom : to fix the bottom position of every line https://code.sololearn.com/WWvhIBcsijxZ/?ref=app

27th Jun 2018, 4:02 PM

777

+ 3

Rahul, how do you make both the top part and the bottom part move?

27th Jun 2018, 5:04 PM

Siddharth

+ 2

Siddharth Ramsundar, is this what you mean? https://code.sololearn.com/Wl92x4dhsiqq/?ref=app

27th Jun 2018, 7:07 PM

777

+ 1

You only need to add: .loader-1 { vertical-align: top; }

27th Jun 2018, 4:17 PM

Calviղ

+ 1

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

27th Jun 2018, 5:28 PM

Calviղ

I have found the error look at width and height (px or %) the animation is funny oh - sorry - I didn’t read your last sentence with the “bar jumping”, this is not solved - only the display of the bars in the playground

27th Jun 2018, 2:45 PM

asa22