Repeating animations

Question

How can I make my animation which is supposed to be a WiFi symbol repeat over and over again. I tried linear and infinite they did not help

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

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

Guys, i just want it to loop infinetly thats what im asking for, am not asking for the bars to go randomley i jsit eant the thing to loop, like when all the bars go down it loops thats all

Answer 5

Okay, ill try that

Answer 6

Can i just do this?

animation: bar1 3s 1.5s linear infinite;

Answer 7

Okay thanks!!

Answer 8

Why doesnt it work when i just do
animation: bar1 3s 1s linear infinite?

Answer 9

Can you show me what you mean?

Answer 10

Yea, i just want it to loop

Answer 11

Its fine, its too messy of a code anyways

Answer 12

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 13

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 14

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

Answer 15

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