Skip to content

Tag: css-animations

How to make a pure-CSS animation of CLOCKWISE rotation past 359 degrees

I’m having an issue with pure CSS-based rotation using transform: rotate() coupled with transition: transform. When rotating past 360 degrees, the transition causes a counter-clockwise rotation. See code below or on CodePen. I know I can just keep increasing/decreasing the degree value (e.g. 356->360, instead for 359->0), but this is for a React app and I’d like to simply use

SVG stroke animation not working in Safari

My JS code goes over each path, and adds a stroke-dasharray and stroke-dashoffset according to path length: Then, My CSS just animates the dashoffset to 0, while lowering the stroke opacity and raising the fill opacity: This works perfectly in Chrome – the animation shows the paths being drawn, but in Safari, the paths just show up without any animation.

svg stroke-dashoffset animation with percentage values

I have been successful in animating stroke-dashoffset with value as <length> as folllowing However, I am trying to figure out how can I calculate the exact % value in css if I decide to use <percentage> instead of value. I came to know from this post that percentages are calculated in respect to the current viewport, which I tried as