CSS dashed border animation

Ignition
1

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

Animation

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

2

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.

3

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.

4

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.

   .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;
    }
}
2 Likes