# Repeating Animations **URL:** \ **Category:** programming\ **Created:** [October 26, 2021, 1:13am UTC](https://forum.kirupa.com/t/repeating-animations/649376 "2021-10-26T01:13:19Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 26, 2021, 1:13am UTC](https://forum.kirupa.com/t/repeating-animations/649376/1 "2021-10-26T01:13:19Z")
how can i make a repeating animation like a question mark box in super mario world? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 26, 2021, 4:47am UTC](https://forum.kirupa.com/t/repeating-animations/649376/2 "2021-10-26T04:47:27Z")
Is this going to live in the DOM (like in a div element, button, etc.)? Or will this animation be living in a canvas? ---
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 26, 2021, 5:11am UTC](https://forum.kirupa.com/t/repeating-animations/649376/3 "2021-10-26T05:11:42Z")
i think you’re talking about html, but i’m talking about javascript ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 26, 2021, 5:33am UTC](https://forum.kirupa.com/t/repeating-animations/649376/4 "2021-10-26T05:33:59Z")
Not quite. Where your animation will be represented changes what techniques you have to work with. This article talks about the differences between both worlds: > **[DOM vs. Canvas](https://www.kirupa.com/html5/dom_vs_canvas.htm)** > > For visually complex tasks, know when to use the DOM and when to use canvas by learning about the two drawing modes used under the hood. ---
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 26, 2021, 7:45am UTC](https://forum.kirupa.com/t/repeating-animations/649376/5 "2021-10-26T07:45:31Z")
i looked at the video, but i still don’t understand, i still don’t understand why i should use DOM or canvas in certain situations ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 26, 2021, 4:35pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/6 "2021-10-26T16:35:09Z")
If you need to control every pixel perfectly and will be dealing with a lot of visuals for things like games, visualizations, charts, etc., then go with the canvas. If you are looking for a more traditional web page/app experience where you’ll have a lot of text, images, etc. then the DOM is your best bet. The DOM also makes it easy for you to use HTML/CSS/JS and 3rd party frameworks. ---
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 26, 2021, 4:47pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/7 "2021-10-26T16:47:07Z")
all my program is doing is drawing a ton of rectangles at once, so maybe DOM ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 26, 2021, 5:07pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/8 "2021-10-26T17:07:28Z")
Based on what you just said, Canvas seems like a good option. How many rectangles are you thinking? Will these rectangles be purely visual, or will users interact with them like clicking on them? ---
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 26, 2021, 5:09pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/9 "2021-10-26T17:09:42Z")
hundreds of rectangles, they will be slightly interactive where if you press the left or arrow most of them change ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 26, 2021, 5:32pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/10 "2021-10-26T17:32:58Z")
I would suggest going with the canvas. Before you go too far, how familiar are you with working in the DOM and working with visuals on the canvas? There is a learning curve for both, so I want to ensure you are fully aware of what you are going into 😛 For learning about the Canvas, I have a series of articles here: [Working with the Canvas](https://www.kirupa.com/canvas/index.htm) For the DOM, these articles are part of the larger JavaScript series: > **[Learn JavaScript: Visual and Beginner-Friendly Tutorials](https://www.kirupa.com/javascript/learn_javascript.htm#theDOM)** > > Visual and beginner-friendly tutorials that teach you JavaScript starting from the basics and going all the way to advanced topics that will help you build real apps! ---
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 26, 2021, 5:34pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/11 "2021-10-26T17:34:47Z")
i’m only 1 year into javascript, so i know none of this at all. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 26, 2021, 8:27pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/12 "2021-10-26T20:27:15Z")
Nice! The first year is always the challenge. In that case, my best suggestion would be to first go through the topics I linked earlier and get a deeper understanding of the concepts. ---
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 26, 2021, 8:37pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/13 "2021-10-26T20:37:16Z")
How would I know I’m using canvas mode or DOM mode? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 26, 2021, 10:42pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/14 "2021-10-26T22:42:47Z")
Oh, you’ll know 😛 If you have a **canvas** element defined and you are exclusively writing JavaScript to draw shapes and other related things inside it, you’ll know you are in the canvas mode. Again, the tutorials I linked to earlier will help. ---
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 26, 2021, 10:44pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/15 "2021-10-26T22:44:51Z")
im using canvas mode ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [October 26, 2021, 10:59pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/16 "2021-10-26T22:59:13Z")
Ok. And your question is: How to create a looping question mark animation like in Super Mario? Do you have a link to your page that you can share? I’d like to know where you’d like to have that box and animation appear. Thanks, Kirupa 🙂 ---
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 26, 2021, 11:02pm UTC](https://forum.kirupa.com/t/repeating-animations/649376/17 "2021-10-26T23:02:52Z")
in a second, i have to make the box ---
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 27, 2021, 12:22am UTC](https://forum.kirupa.com/t/repeating-animations/649376/18 "2021-10-27T00:22:50Z")
> **[Khan Academy](https://www.khanacademy.org/computer-programming/interactive-boo-project/5740100231151616)** ---
**Author:** ![KERRYLOPEZ](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@KERRYLOPEZ](https://forum.kirupa.com/u/KERRYLOPEZ)\ **Post date:** [October 27, 2021, 5:43am UTC](https://forum.kirupa.com/t/repeating-animations/649376/19 "2021-10-27T05:43:42Z")
For repeating animation , watch this out! [![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/e/3/e30e32367f54b4cc5e897f633303d71230c74c20.jpeg "CSS Animation Tutorial #6 - Repeating Animations") ](https://www.youtube.com/watch?v=DCgcgXF0Fe0) ---
**Author:** ![marqimoth](https://avatars.discourse-cdn.com/v4/letter/m/ecccb3/32.png) [@marqimoth](https://forum.kirupa.com/u/marqimoth)\ **Post date:** [October 27, 2021, 5:56am UTC](https://forum.kirupa.com/t/repeating-animations/649376/20 "2021-10-27T05:56:13Z")
how can i use this in javascript, and have not an instant transition [Next page](https://forum.kirupa.com/t/repeating-animations/649376.md?page=2)