New course! Every coder should learn Generative AI!
Try a free lesson+ 6
How to repeat an animation infinitively in HTML ?
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
+ 22
animation-iteration-count:infinite;
+ 9
SVG-repeatCount="indefinite"
CSS- animation-iteration-count:infinite;
+ 8
Use CSS animation and @keyframes selectors to define changing of CSS values.
+ 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? 🙁
+ 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);
}
}
Often have questions like this?
Learn more efficiently, for free:
Hot today
Android studio Tutorial
0 Votes
Why output is 0 for from_chars
2 Votes
Cyber security
0 Votes
Why did my code got deleted?
0 Votes
Bash
0 Votes
Personal chat
1 Votes
Help
0 Votes
Error...
1 Votes