SVG Line Animation Reversed in Safari? -
i've built pretty simple spinning animations site, , great in chrome/firefox, reason, they're animating in reverse in safari. i've played around changing values of offsets, nothing seems working. there workaround @ all?
.sq { width: 50vw; height: auto; padding: 2.2vw; } .path { stroke-dasharray: 250; stroke-dashoffset: 250; animation: line 3s ease forwards; } @keyframes line { { stroke-dashoffset: -250; } { 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 check out on codepen well:
safari doesn't support negative dashoffsets. you'll need work around reversing path , having dashoffset animate other way.
Comments
Post a Comment