+ 6

How to repeat an animation infinitively in HTML ?

6th Jan 2018, 10:53 AM
Tran Huu Dang
Tran Huu Dang - avatar
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)
Vitaliy Angelov (Rostov-on-Don) - avatar
+ 22
animation-iteration-count:infinite;
6th Jan 2018, 11:03 AM
Valen.H. ~
Valen.H. ~ - avatar
+ 9
SVG-repeatCount="indefinite" CSS- animation-iteration-count:infinite;
6th Jan 2018, 1:29 PM
Muhd Khairul Amirin
Muhd Khairul Amirin - avatar
+ 8
Use CSS animation and @keyframes selectors to define changing of CSS values.
6th Jan 2018, 11:02 AM
CalviŐ˛
CalviŐ˛ - avatar
+ 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
Tran Huu Dang - avatar
+ 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)
Vitaliy Angelov (Rostov-on-Don) - avatar