Answer 1

.bar1 {
height: 15px;
width: 7.5px;

animation-duration: 3s;
animation: bar1 1s infinite;
}

Answer 2

FF9900
css animation
https://code.sololearn.com/W5bt0gQc3RLg/?ref=app

Answer 3

FF9900
I was thinking of resize on hover, if such a thing is possible...
One thing I have trouble with on 'responsive' css is text.
Text are troublesome... luckily there is none here. One workaround is to use svg, but that is another can of worms...😅

extra curricular reading material:
https://hackernoon.com/the-best-css-unit-for-a-responsive-design-ku6q37to

Answer 4

FF9900
great suggestion.✔️ That would make it more manageable too.
Maybe it would be better to use relative units and css variables to make the thing resizable? Is it doable?

Answer 5

FF9900
I'm done with this.
Your Mom , sorry for hijacking your post...

vw, vh, rem, etc... are useful, but hard to visualize on different devices with diffrerent screen resolution.

Css variables are useful in concept, but unwieldy in practice.

Maybe it's overkill for this experiment, but it's too much work to convert back to px just to see if transitions would break.

final version with bells and whistles...

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

Answer 6

Your Mom
if you are using css animation, you have to add:
animation-iteration-count:infinite;
if javascript I would suggest requestAnimationFrame.

Answer 7

yes. I just kept it separated to make it easier to sort the numbers when I was tweaking the timing.