+ 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.]

27th Jun 2018, 2:20 PM
Siddharth
Siddharth - avatar
6 ответов
+ 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
777 - avatar
+ 3
Rahul, how do you make both the top part and the bottom part move?
27th Jun 2018, 5:04 PM
Siddharth
Siddharth - avatar
27th Jun 2018, 7:07 PM
777
777 - avatar
+ 1
You only need to add: .loader-1 { vertical-align: top; }
27th Jun 2018, 4:17 PM
Calviղ
Calviղ - avatar
27th Jun 2018, 5:28 PM
Calviղ
Calviղ - avatar
0
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