SVG Line Animation Reversed in Safari?

user_5868815 0
Viewed 1336

I've built pretty simple spinning animations for a site, and they look great in Chrome/Firefox, but for some reason, they're animating in reverse in Safari. I've played around with changing values of the offsets, but nothing seems to be working. Is there a workaround for this at all?

.sq {
  width: 50vw;
  height: auto;
  padding: 2.2vw;
}

.path {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation: line 3s ease forwards;
}

@keyframes line {
  from {
    stroke-dashoffset: -250;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<div class="sq">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.32 81.32">
  <defs>
    <style>
      .cls-1{fill:#202020;opacity:0.1;}
      .path{fill:none;stroke:#ef3f44;stroke-miterlimit:10;stroke-width:5px;}
    </style>
  </defs>
  <g id="94" data-name="94">
    <g id="Objects">
      <circle cx="40.66" cy="40.66" r="27.17" class="cls-1"/>
      <path d="M40.66 79.15a38.49 38.49 0 1 1 38.49-38.49 38.53 38.53 0 0 1-38.49 38.49zm0-76.07a37.58 37.58 0 1 0 37.58 37.58A37.63 37.63 0 0 0 40.66 3.08z" class="cls-1"/>
      <path d="M26.83 5.1a38.16 38.16 0 1 0 13.83-2.6" class="path"/>
    </g>
  </g>
</svg> 
</div>

Also feel free to check this out on Codepen as well:

https://codepen.io/noahbrennan/pen/RLNWXj

safari animation svg css
3 Answers

In order not to use negative values of stroke-dashoffset, you can use double the positive value of stroke-dashoffset: 500;

Instead of negative values

@keyframes line {
  from {
    stroke-dashoffset: -250;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Use double positive values:

@keyframes line {
  from {
    stroke-dashoffset: 250;
  }
  to {
    stroke-dashoffset: 500;
  }
}


.sq {
  width: 50vw;
  height: auto;
  padding: 2.2vw;
}

.path {
  stroke-dasharray: 250;
  stroke-dashoffset: 250;
  animation: line 3s ease forwards;
}

@keyframes line {
  from {
    stroke-dashoffset: 250;
  }
  to {
    stroke-dashoffset: 500;
  }
}
<div class="sq">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 81.32 81.32">
  <defs>
    <style>
      .cls-1{fill:#202020;opacity:0.1;}
      .path{fill:none;stroke:#ef3f44;stroke-miterlimit:10;stroke-width:5px;}
    </style>
  </defs>
  <g id="94" data-name="94">
    <g id="Objects">
      <circle cx="40.66" cy="40.66" r="27.17" class="cls-1"/>
      <path d="M40.66 79.15a38.49 38.49 0 1 1 38.49-38.49 38.53 38.53 0 0 1-38.49 38.49zm0-76.07a37.58 37.58 0 1 0 37.58 37.58A37.63 37.63 0 0 0 40.66 3.08z" class="cls-1"/>
      <path d="M26.83 5.1a38.16 38.16 0 1 0 13.83-2.6" class="path"/>
    </g>
  </g>
</svg> 
</div>

user_73948710

Had the same issue for an svg circle. I wanted the animation to progress counter clockwise. Ended up solving it by horizontally flipping the circle and using a positive dash offset.

I used a transform to flip the circle.

scale(-1 1)

See codepen for an example.

https://codepen.io/rikki404/pen/YzydPJq

user_117883140
Related