Subscribe
Sign in
Keyframes.app
p/keyframes-appHelps you write better CSS.
Start new thread
Mitch

Keyframes.app - A timeline editor for CSS animations

by•

Keyframes gives you a visual timeline to help you create, view, and run animations without having to go back and forth between your browser and editor.

And it gives you the CSS when you're done.

Use the web app to create an animation on a basic shape, or install the extension to create an animation on any element, anywhere, on any website.

Add a comment

Replies

Best
Mitch
Maker
Hello! I was spending a bunch of time last week cleaning up another project I'm working on, and ended up wasting a ton of time working on subtle animations I was adding. I was sick of making a small change to the animation in a text editor, saving, then going back to the browser to see the changes... so that's when I came up with the idea for Keyframes. With the extension, you can choose any element on a website to animate. You add steps to the timeline, then add or change CSS properties that you want your target element to have at each step. It updates live, so if your're moving/scaling/rotating/etc the target element, you can see exactly what it will look like without having to switch between your editor and browser. Once you're happy with your animation, you get the full code to add to your project. I also made the editor available as a standalone page on the site for people who don't want to use an extension. It was a quick project, and I know there's a lot that could be added & improved, but I would love to hear what people think about it!
Lee Qixian
This is amazing. Makes things so much easier to visualize especially for people (like myself) that aren't the greatest with CSS and let alone animating with CSS. Thank you so much for this!
James Welch
this is really, really nice. very useful for someone like me that needs to do stuff like this, but has to call the experts in. really smart. great, simple, clear editor.