Need help with these SVG animations using CSS
Hi There I need help to make it possible this two svg animations, mostly with CSS, because I've another animations as well which I did using CSS transform and @keyframes and I don't wanna use GSAP or ANIME.JS etc. Vanilla JS can be used if needed, but I don't think.
1. https://www.berrycast.com/conversations/3aa48e85-2308-5717-9c39-f88033ca813e
2. https://www.berrycast.com/conversations/1ceba339-e2dc-5a58-8c11-7480bc64155d
Created on October 16, 2025 at 15:41
By Mohammad Arshad | Duration 23s
Created on October 16, 2025 at 15:39
By Mohammad Arshad | Duration 11s
1 Reply
The first, just looks like changes in position, rotation, & opacity, so it should be a relatively straightforward
@keyframes.
The second seems to alter the height of the image based on the content, so you'd need both an internal keyframe to handle the animation & a synced one in the document to handle the height change.
I don't think you need it, but you can also use the SMIL <animate> tag in SVG to control arbitrary attributes beyond what CSS has control over.
The hard part is going to be conceptualizing what transforms you need. It's difficult to go from the video to a set of keyframes.
Supposedly, parametric animations are supported in Graphite though the timeline feature for visualizing said animations isn't complete yet.
There's also SVGator which does have a timeline, though it only exports to SVG/JS (or Lottie files which are JSON-based configs for a SVG-animating state machine (and have their own timeline-based editor)).
It may work to use one of the timeline editors to figure out your transforms & then convert that to @keyframes.SVG Animator Login - Start Animating Today | SVGator
Here is your SVG animator login. Easily access your account and start animating SVG like never before - No coding required! Visit SVGator today to learn more.
LottieFiles
LottieFiles: Download Free lightweight animations for website & apps.
Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!
Graphite
Graphite features