# Moving Icon with CSS Animation

**URL:** <https://forum.inductiveautomation.com/t/moving-icon-with-css-animation/60085>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [May 26, 2022, 6:14pm UTC](https://forum.inductiveautomation.com/t/moving-icon-with-css-animation/60085 "2022-05-26T18:14:29Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [May 26, 2022, 6:14pm UTC](https://forum.inductiveautomation.com/t/moving-icon-with-css-animation/60085/1 "2022-05-26T18:14:29Z")

</div>

By any chance do any CSS wizards here (@nader.chinichian or @victordcq ?) know how to take an icon and get it to move horizontally in an animation inside of its container?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/f/6feb425628e1d6cadbaf8b52f8f42ebf43ee8744.png)

The other thing I would really like to do is also get it to repeat, so its like an endless moving `<<<<<` through the box.

EDIT: Kind of like this, except not with me just dragging a repeated icon to the left… lol  
 ![Screen Recording 2022-05-26 at 11.17.39 AM](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/3/c3dfb047fa52477bedf4bbd574db090516f3d54e.gif)

---

<div class="post-metadata">

**Author:** ![swolnisty](https://avatars.discourse-cdn.com/v4/letter/s/7bcc69/32.png) [@swolnisty](https://forum.inductiveautomation.com/u/swolnisty)\
**Post date:** [May 26, 2022, 7:14pm UTC](https://forum.inductiveautomation.com/t/moving-icon-with-css-animation/60085/2 "2022-05-26T19:14:22Z")

</div>

You could set up a keyframe animation, either by declaring it in one of your theme CSS files, or by injecting it in through a new styleclass’s background image value:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/7/e77bc6357838c83d2d4b52b772da488473dd8dc9.png)

```auto
}@keyframes moveLeft {0% {left: 100%;}50% {left: 50%;}100% {left: 0%;}}{

```

Then, just create an “animation” property within the style of your icon:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/9/f91f028763a7537db580cbf2f62863149efdde39.png)

The animation property’s shorthand I’m using here is {keyframe name} {animation duration} {iteration count}

Note that this does not always render correctly for me in the designer, you would better off testing it in an actual Perspective session. Obviously, you’ll want to modify the keyframe steps until the animation is what you’re looking for.

Edit: You know, I tested this in a coordinate container and it was working fine, but after attempting to get it to scroll like a constant marquee in a flex row container I was having some difficulty getting the expected behavior. You’ll likely have to play with it a little bit if that is your end goal.

---

<div class="post-metadata">

**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\
**Post date:** [May 26, 2022, 7:49pm UTC](https://forum.inductiveautomation.com/t/moving-icon-with-css-animation/60085/3 "2022-05-26T19:49:43Z")

</div>

Should be able to use the following

Put the following in your css.

```auto
@keyframes animatedBackground {
	0% { background-position: 0 0; }
	100% { background-position: -300px 0; }
}

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/e/de469e4082e448d2d7c97fd23d1bfaaac0363c5d.png)

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [May 30, 2022, 6:30am UTC](https://forum.inductiveautomation.com/t/moving-icon-with-css-animation/60085/4 "2022-05-30T06:30:08Z")

</div>

For sake of performance you can use image background with following setting

> **[Creating an infinite CSS background image loop - LogRocket Blog](https://blog.logrocket.com/creating-infinite-css-background-image-loop/)**
>
> Learn two ways of creating an infinite background image loop scrolling effect with some basic HTML markup and CSS.

Other wise like other mentioned use animation property in XY coordinate containers.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [June 1, 2022, 1:23pm UTC](https://forum.inductiveautomation.com/t/moving-icon-with-css-animation/60085/5 "2022-06-01T13:23:49Z")

</div>

Out of curiosity, between the image loop, or something like a gif.

Do you have any performance recommendations for putting something like Conveyors on a P&ID?

I really liked the idea of using pipes, and just styling them to look like a conveyor, but that was before I realized I couldn’t style individual pipes outside of color. That would have been nice because it would have provided the SVG to the client as one large SVG, instead of the back and forth of many smaller ones.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [June 2, 2022, 9:57am UTC](https://forum.inductiveautomation.com/t/moving-icon-with-css-animation/60085/6 "2022-06-02T09:57:18Z")

</div>

Of course gif files are faster if you don’t need to scale the objects. In the case of conveyor you need to scale via X axis so I like to use SVG and animated the stroke dashed offset for it