# CSS dashed border animation

**URL:** <https://forum.inductiveautomation.com/t/css-dashed-border-animation/70609>\
**Category:** Ignition\
**Tags:** ignition81\
**Created:** [March 3, 2023, 9:00pm UTC](https://forum.inductiveautomation.com/t/css-dashed-border-animation/70609 "2023-03-03T21:00:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [March 3, 2023, 9:00pm UTC](https://forum.inductiveautomation.com/t/css-dashed-border-animation/70609/1 "2023-03-03T21:00:16Z")

</div>

I'm trying to do a dashed border animation similar to this,

![Animation](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/a/0ab385737eaf7f548ec05264720ac1c0c2e4d4e1.gif)

Does anyone have something that they would be willing to share?

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 3, 2023, 10:07pm UTC](https://forum.inductiveautomation.com/t/css-dashed-border-animation/70609/2 "2023-03-03T22:07:09Z")

</div>

Googling 'CSS marching ants animation' has (a lot of) different approaches. If you stick to ones that are "pure" CSS, they should be relatively easy to adapt to Ignition, especially with the new advanced stylesheet feature.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [March 3, 2023, 10:36pm UTC](https://forum.inductiveautomation.com/t/css-dashed-border-animation/70609/3 "2023-03-03T22:36:40Z")

</div>

I did that very thing, unfortunately I wasn't able to get anything to work (the ants were very lazy). I'll keep trying, thanks.

---

<div class="post-metadata">

**Author:** ![Kevin\_Flener](https://avatars.discourse-cdn.com/v4/letter/k/74df32/32.png) [@Kevin\_Flener](https://forum.inductiveautomation.com/u/Kevin_Flener)\
**Post date:** [February 20, 2025, 10:36pm UTC](https://forum.inductiveautomation.com/t/css-dashed-border-animation/70609/4 "2025-02-20T22:36:24Z")

</div>

I realize this is an old topic, but I got something to work for me and wanted to share, in case anyone else views it.

```python
   .psc-ants {
    padding: 7px;  
    margin: 5px;
    background-size: 
      20px 2px, 
      20px 2px, 
      2px 20px, 
      2px 20px;
    background-position: 
      0 0, 
      0 100%, 
      0 0, 
      100% 0;
    background-repeat: 
      repeat-x, 
      repeat-x, 
      repeat-y, 
      repeat-y;
    background-image: 
      linear-gradient(to right, black 50%, transparent 50%), 
      linear-gradient(to right, black 50%, transparent 50%), 
      linear-gradient(to bottom, black 50%, transparent 50%), 
      linear-gradient(to bottom, black 50%, transparent 50%);
    animation: marching-ants 1s linear infinite;
}

@keyframes marching-ants {
    0% {
      background-position: 
        0 0, 
        0 100%, 
        0 0, 
        100% 0;
    } 
    100% {
      background-position: 
        40px 0, 
        -40px 100%, 
        0 -40px, 
        100% 40px;
    }
}

```