Keyframes.app - Visual editors to generate CSS for your projects 👨‍💻

Hello! My name is Mitch - & Keyframes is a side project I've been working on for a little bit. Tbh I made Keyframes mainly for myself - for a few reasons. I wanted the development tools I use often to all be in one place, and I wanted to learn some new development tools and frameworks, so I used this as an excuse 😀 But now I'm happy to share it with everyone! So what is it? Keyframes is progressive web app with various tools for creating CSS properties. 👾Animations: A video-editor like timeline to create CSS @Keyframe animations step-by-step to use in your projects. Adjust properties to create simple color animations, or more advanced 3d transform animations. ❐ Box-Shadows: Simply move some sliders to adjust your shadow, add multiple layers, then get the CSS. 🎨Colors: Choose & convert colors, create color palettes, get a URL directly to your palette to share. ⌨️Character codes: search for and easily copy character CSS and HTML values. 👋What makes it stand out: • It's free - completely free. No ads, no signups, nothing. • You can use it on any device or browser, and install it as a progressive web app if your browser supports it. • It's private. There's no backend - only local storage. Also the analytics only track page views, and don't use any cookies. • It's open source - the entire source is on my GitHub for anyone to use. • Consistent design across all tools. 😎Cool features: (This is what I'm talking about when I said I wanted to learn some new tools) • Dark and light themes. • Keyboard shortcuts. • Load preset animations. • Generate color palettes from a single color. • Save your animations or other creations to local storage to edit later. • Works offline if installed as PWA. • Create shadows by tilting your device (phones & tablets). • Feels native with touch gestures and swiping. • Choose the tool you would like to see first when Keyframes loads. • More coming soon - I already have a list of more tools I plan to make. I'd love to hear any questions, suggestions, or criticisms!

This is so awesome!

This is awesome

Thanks for the good tool.

As an animator, this is great! I've been looking for something like this.

@sleumasm Would you mind sharing the stack it's built on? Is it NextJS? Because the sliders are quite snappy, as if it's done in vanillaJS.

@sleumasm thats great but deleteStep in Animate is not working

Awesome tool. How do I delete a box shadow layer?

Looks very cool! This is some of my feedback and suggestions after trying it out for a bit: - The keyframes dont seem to be able to be moveable after adding - Importing a local image/svg would be nice! - Sometimes the keyframe is bugged and cant be deleted Bookmarked it for sure though ;)

looks awesome!