Free Online CSS Animation Keyframes Generator

Overview

A high-performance, browser-based visual builder that allows web developers and designers to create complex CSS animations without writing raw code. The tool provides a visual timeline to manage @keyframes logic, offering a live preview and instant CSS code generation.

Core Features

• Visual Timeline Editor: An interactive slider representing the animation duration (0% to 100%). Users can "scrub" through time to add keyframe stops.
• Property Editor: A robust control panel to manipulate CSS properties at the selected keyframe, including:
  • Transform: Rotation (deg), Scale (ratio), Skew (deg), and Translate (px).
  • Appearance: Opacity (0.0 - 1.0), Background-color (Hex/RGB).
  • Custom Timing: Ability to set easing functions (ease, linear, ease-in-out, custom cubic-bezier) for the animation loop.
• Live Preview Sandbox: A dedicated central area showing a geometric shape reflecting the generated animation in real-time as properties change.
• Code Export: Instant generation of clean, production-ready @keyframes CSS code with a one-click "Copy to Clipboard" feature.
• Preset Library: Common animation patterns (Fade-in, Pulse, Slide-in, Flip) available as quick-start templates.

UI/UX Specification

• Design Aesthetic: Professional, clean "SaaS" aesthetic. Light background (#F8FAFC) with soft, neutral grey borders and vibrant accent colors (e.g., Indigo-600) for active controls.
• Layout:
  • Header: Simple, functional title and clear call-to-action buttons.
  • Main Content: A three-column split layout:
    • Left: Property modification panel (Inputs, sliders, color pickers).
    • Center: Visual preview box (Where the animation plays).
    • Right: Code output window (Read-only, monospaced font, syntax highlighted).
  • Bottom: Timeline scrubber strip spanning the full width, showing markers for created keyframes.
• Animations: Subtle CSS transitions (ease-out, 0.2s) on all UI elements (buttons, sliders) for a premium, responsive feel.

Technical Constraints & Requirements

• Architecture: Single HTML file containing all HTML, CSS, and Vanilla JavaScript.
• State Management: All animation data (keyframes, duration, easing) must be held in a simple JavaScript object within the browser's memory. No data persistence allowed.
• No Storage: Absolutely no use of localStorage, sessionStorage, or cookies. The app must function identically upon refresh without state recovery.
• Library Usage: Tailwind CSS via CDN for styling; FontAwesome CDN for iconography.
• Performance: Ensure the live preview sandbox is performant by using requestAnimationFrame for smooth playback.
• Responsiveness: The UI must stack vertically on mobile devices, with the preview box remaining visible at the top and the timeline/code panel accessible via scrollable sections.