Why this animation is generating

Question

A simple ":" is creating animation in html.
https://code.sololearn.com/W2COvhMF1x0o/?ref=app

Answer 1

So ugly that it is almost nice
💯

Answer 2

Try it elsewhere than sololearn if it works.
Sololearn even so <div> of head tag.
I think sololearn getting second progress as css content due to : and ;

Answer 3

Now see and observe changes
https://code.sololearn.com/WTNYgiCxngmz/?ref=app
मनु राय ब्रह्मर्षि

Answer 4

Browser engine is very kind, when it fail to parse an element, it will just assume a default behaviour for rendering the element. Here your second progress element's attributes are not well parsed (due to the use of colons and semicolons), so browser simply render a default progress element.

Try add a default progress element <progress></progress> in your code, you'll see that a default progress element is behaving similarly to the second progress which uses colons and semicolons.