+ 6

How to repeat an animation infinitively in HTML ?

6th Jan 2018, 10:53 AM

Tran Huu Dang

6 Answers

+ 3

@JULIUS.YP Look at my code. You can find the answer there in CSS. Give attention to the string :" animation : run 2s infinite", where "run" is the name of "@keyframes run", 2s is the period, during the animation is continued, and infinite is the answer to your question. I hope I helped you.) https://code.sololearn.com/WduyE03SVhDE/?ref=app

6th Jan 2018, 12:39 PM

Vitaliy Angelov (Rostov-on-Don)

+ 22

animation-iteration-count:infinite;

6th Jan 2018, 11:03 AM

Valen.H. ~

+ 9

SVG-repeatCount="indefinite" CSS- animation-iteration-count:infinite;

6th Jan 2018, 1:29 PM

Muhd Khairul Amirin

+ 8

Use CSS animation and @keyframes selectors to define changing of CSS values.

6th Jan 2018, 11:02 AM

Calviղ

+ 4

Thank you for your reply but can you give me an example, because I've tried it but it doesn't work for me. In CSS, how do I add that feature? 🙁

6th Jan 2018, 11:49 AM

Tran Huu Dang

+ 4

@JULIUS.YP Try this code: HTML: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <div id="div"> <span id="span"></span> </div> </body> </html> CSS: #div { width: 335px; height: 400px; border: 5px solid grey; border-top: none; } #span { display: block; width: 40px; height: 40px; border: 2px solid; background-color: red; transform: translate(140px); animation: run 2s infinite linear; } @keyframes run { 100% { transform: translate(140px, 357px); } }

6th Jan 2018, 12:49 PM

Vitaliy Angelov (Rostov-on-Don)