CSS Animation Studio

CSS Animation Studio

Visual editor for CSS animations and keyframes

6 followers

Visit website
•
•
CSS Animation Studio is an open source visual editor for animations. You can browse through a collection of free starter animations, step through your timeline keyframe by keyframe, determine the perfect animation timing curves, and export everything to code.
CSS Animation Studio gallery image
CSS Animation Studio gallery image
CSS Animation Studio gallery image
Free
Launch tags:Design Tools•User Experience•Developer Tools
Launch Team / Built With
Checkmarx Developer Assist for AI IDEs
Security linter for vibe coding: fix vulns as you build
Promoted

What do you think? …

ikcede
Maker
📌
Hi Product Hunt Community! I'm happy to launch a beta version of CSS Animation Studio, an animation tool that I built recently! Originally, I'd wanted to build a simple animation repository similar to Animista except with more complicated animations such as ones on Codepen. I thought it'd be cool to build a UI that helps quickly customize different options of the animation and see the changes live before throwing it into a codebase. Then, I thought, what if I could edit the animation like a video timeline? So what should have been a simple NextJS exercise ballooned into an editing studio for animations. Currently, some of the supported features include: - A clickable and draggable timeline with a preview - Directly creating and shifting keyframes on the timeline - A drag and drop timing curve editor - The ability to directly modify the target's HTML and CSS - Export to CSS keyframes - Runs locally after initial load I'm excited to share CSS Animation Studio with everyone here and hope that you'll find the product helpful! I'd love to hear any feedback or if there's anything you'd like to see added in the future!