How to Make a Smooth Dashed Border Rotation Animation Like 'Marching Ants'

How to make a smooth dashed border rotation animation like 'marching ants'

Cog and chain animation :

I totaly refactored the code (CSS and HTML), it is now :

• shorter (especialy the css)
• simpler
• more realistic: corrected the synchronisation issue bteween the chain and the cogs and added a missing cog on the right because your chain seemed to be floating in the air :

DEMO

The approach is the same, animating the rotation angle for the cogs and dash-offset for the chain path. I tweaked the timing between both animations to make it look as if the cogs are pulling the chain.

Browser support :

As IE doesn't support the svg animate element I also made this version of the animation with the snap.svg library that also supports IE9 and over (tested in IE9 with crossbrowsertesting).

DEMO with IE support

var cont   = new Snap('#svg'),

    chain  = cont.select('#chain'),

    cogAcw = cont.select('#cog_acw'),

    cogCw  = cont.select('#cog_cw'),

    speed  = 500;  // Lower this number to make the animation faster

function infChain(el) {

    var len = el.getTotalLength();

    el.attr({"stroke-dasharray": len/62,"stroke-dashoffset": 0});

    el.animate({"stroke-dashoffset": -len/31}, speed, mina.linear, infChain.bind(null, el));

}

function rotateAcw(el) {

    el.transform('r22.5,20,20');

    el.animate({ transform: 'r-22.5,20,20' }, speed, mina.linear, rotateAcw.bind( null, el));

}

function rotateCw(el) {

    el.transform('r0,20,20');

    el.animate({ transform: 'r45,20,20' }, speed, mina.linear, rotateCw.bind( null, el));

}

infChain(chain);

rotateAcw(cogAcw);

rotateCw(cogCw);

svg {

    width:100%;

}

<script src="http://thisisa.simple-url.com/js/snapsvg.js"></script>

<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 30">

    <defs>

        <circle id="c" cx="20" cy="20" r="4" stroke="#808080" fill="none" stroke-width="4" />

        <path id="d" stroke="#808080" stroke-width="2" d="M20 13 V16 M27 20 H24 M20 27 V24 M13 20 H16" />

        <g id="cog_acw">

            <use xlink:href="#c" /><use xlink:href="#d" />

            <use xlink:href="#d" transform="rotate(45 20 20)" />

        </g>  

        <g id="cog_cw">

            <use xlink:href="#c" /><use xlink:href="#d" />

            <use xlink:href="#d" transform="rotate(45 20 20)" />

        </g>  

    </defs>

    <path id="chain" stroke-width="1" stroke="#000" fill="transparent" 

    d="M21.3 13.5 H20 C11.4 13.5 11.4 26.5 20 26.5 H80 C89.4 26.5 89.4 13.5 80.8 13.5z" />

    <use  xlink:href="#cog_acw" />

    <use  transform="translate(60.5 0), rotate(19,20,20)" xlink:href="#cog_acw" />

    <use  transform="translate(-4.5 -4.5),scale(.8), rotate(0,20,20)" xlink:href="#cog_cw" />    

</svg>

Dashed border animation in css3 animation

This much is possible with CSS and is pretty simple when using multiple backgrounds and changing their positions using animations.

.border {

  height: 100px;

  width: 200px;

  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);

  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;

  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;

  background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;

  padding: 10px;

  transition: background-position 2s;

}

.border:hover{

    background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="border">Some text</div>

How do I smooth out a 3D transform rotation?

Your order of the 2 different rotations is wrong, you should set the rotateX before the rotateY. If you do so, the animation is much more easy, just a 360 deg turn on the Y axis:

@keyframes loading-cube {
  0%  {transform: translateZ(-800px) rotateX(-19deg) rotateY(0deg);}
  100%  {transform: translateZ(-800px) rotateX(-19deg) rotateY(360deg);}
}

edited demo

SVG Path rotation animation

You need to add transform-box: fill-box; This will make the object bounding box to be used as the reference box.

.wing1 {
  transform-origin: bottom right;
  transform-box: fill-box;
  animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
  @keyframes spin {
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
  }
}

---

Related Topics