Skip to content
Advertisement

Tag: css-animations

Unsmooth sliding-up animation

I have created this page and when the “got it” button on the top panel is clicked, the panel will slide up and disappear while the page will also move up to cover the panel space. I have noticed that when the animation plays, it is not that smooth as white space can be seen in the split second that

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

Advertisement