{
  "title": "Css Keyframe Timeline Editor",
  "human_url": "https://happytails.ai/en/developer-tools/css-keyframe-timeline-editor/",
  "agent_url": "https://happytails.ai/agents/en/developer-tools/css-keyframe-timeline-editor/",
  "language": "en",
  "markdown_url": "https://happytails.ai/en/developer-tools/css-keyframe-timeline-editor.md",
  "content": "Css Keyframe Timeline Editor\nAnalyze CSS locally with explicit inputs, bounded results and a complete downloadable report.\nHow can we improve this tool?\nReport a problem or share an idea.\nPlease leave out private information. Your message and the tool name go to our team via PostHog.\nHow to use Css Keyframe Timeline Editor\nPaste CSS or JSON using the example.\nReview the bounded report and assumptions.\nDownload complete JSON or CSV.\nUseful next steps\nCss Specificity Calculator\nCss Cascade Debugger\nCss Custom Property Resolver\nUse the documented input\nPreview and edit animation timing before exporting CSS",
  "content_format": "text/plain",
  "visibility": "public",
  "links": [
    {
      "name": "Css Specificity Calculator",
      "url": "https://happytails.ai/en/developer-tools/css-specificity-calculator/"
    },
    {
      "name": "Css Cascade Debugger",
      "url": "https://happytails.ai/en/developer-tools/css-cascade-debugger/"
    },
    {
      "name": "Css Custom Property Resolver",
      "url": "https://happytails.ai/en/developer-tools/css-custom-property-resolver/"
    }
  ],
  "tool": {
    "id": "css-keyframe-timeline-editor",
    "category": "developer-tools",
    "built": true,
    "requirements": "Process bounded CSS locally. Reports preserve complete input and assumptions.",
    "implementation": {
      "fields": [],
      "presentation": "metrics",
      "inputMaxLength": 200000,
      "inputErrorCode": "CSS_TOOL_INPUT",
      "note": "Inspect and serialize a keyframe timeline. Processing stays on your device. Reports are bounded and complete within the stated limits.",
      "example": {
        "input": "{\"css\":\"@keyframes fade { from { opacity: 0 } to { opacity: 1 } }\",\"duration\":1}",
        "options": {}
      },
      "experience": {
        "automatic": false,
        "single": false,
        "inputMaxLength": 200000,
        "inputMode": "text",
        "label": "CSS",
        "placeholder": "a { color: #3366cc; }",
        "help": "Paste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.",
        "action": null
      },
      "mode": "explicit",
      "interactive": false
    },
    "execution": "Browser interface",
    "api": null,
    "browser_agent": {
      "supported": true,
      "name": "run_current_tool",
      "discovery": "WebMCP on the human page in a supporting browser",
      "verification": "See audit/API-AUDIT.md; availability is not verification"
    }
  },
  "markdown": "# Css Keyframe Timeline Editor\n\n- Human page: https://happytails.ai/en/developer-tools/css-keyframe-timeline-editor/\n- Markdown: https://happytails.ai/en/developer-tools/css-keyframe-timeline-editor.md\n- Structured JSON: https://happytails.ai/agents/en/developer-tools/css-keyframe-timeline-editor/index.json\n- Visibility: public\n\n## Tool capabilities\n\n| Property | Value |\n| --- | --- |\n| Tool ID | `css-keyframe-timeline-editor` |\n| Category | developer-tools |\n| Implementation | Registered implementation. Registration alone is not a production-quality guarantee. |\n| Browser execution | Use the visible action or interactive controls. |\n| Browser processing | Browser; see tool notes for network behavior. |\n| HTTP API | Not callable through HTTP. |\n| Browser-agent interface | run_current_tool |\n\n### Implementation notes\n\nInspect and serialize a keyframe timeline. Processing stays on your device. Reports are bounded and complete within the stated limits.\n\n### Inputs and settings\n\nText input: CSS.\n\nExample or placeholder shown in the interface (not a validated fixture):\n\n```text\na { color: #3366cc; }\n```\n\nPaste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.\n\nNo additional settings are declared for this tool.\n\n### Browser-agent workflow\n\n1. Open the human page in a browser that supports WebMCP.\n2. Discover the interface exposed by that page; use its actual schema.\n3. Select files on the page first when the tool requires files.\n4. Call `run_current_tool` with valid input and settings.\n5. Inspect the returned result or error and the displayed output. Retrieve files from the displayed download links.\n\nCalls do not automatically copy or download results. Browser permissions still apply. Interface availability alone is not proof of successful execution.\n\n### Planning specification\n\nProcess bounded CSS locally. Reports preserve complete input and assumptions.\n\nThis describes intended requirements. Use the implementation notes, interface schema and observed output to determine current support.\n\n### Complete machine-readable capability record\n\n```json\n{\n  \"id\": \"css-keyframe-timeline-editor\",\n  \"category\": \"developer-tools\",\n  \"built\": true,\n  \"requirements\": \"Process bounded CSS locally. Reports preserve complete input and assumptions.\",\n  \"implementation\": {\n    \"fields\": [],\n    \"presentation\": \"metrics\",\n    \"inputMaxLength\": 200000,\n    \"inputErrorCode\": \"CSS_TOOL_INPUT\",\n    \"note\": \"Inspect and serialize a keyframe timeline. Processing stays on your device. Reports are bounded and complete within the stated limits.\",\n    \"example\": {\n      \"input\": \"{\\\"css\\\":\\\"@keyframes fade { from { opacity: 0 } to { opacity: 1 } }\\\",\\\"duration\\\":1}\",\n      \"options\": {}\n    },\n    \"experience\": {\n      \"automatic\": false,\n      \"single\": false,\n      \"inputMaxLength\": 200000,\n      \"inputMode\": \"text\",\n      \"label\": \"CSS\",\n      \"placeholder\": \"a { color: #3366cc; }\",\n      \"help\": \"Paste CSS rules, including their selectors. Up to 200,000 characters. Review the settings before running.\",\n      \"action\": null\n    },\n    \"mode\": \"explicit\",\n    \"interactive\": false\n  },\n  \"execution\": \"Browser interface\",\n  \"api\": null,\n  \"browser_agent\": {\n    \"supported\": true,\n    \"name\": \"run_current_tool\",\n    \"discovery\": \"WebMCP on the human page in a supporting browser\",\n    \"verification\": \"See audit/API-AUDIT.md; availability is not verification\"\n  }\n}\n```\n\n## Page guide\n\nAnalyze CSS locally with explicit inputs, bounded results and a complete downloadable report.\n\nHow can we improve this tool?\n\nReport a problem or share an idea.\n\nPlease leave out private information. Your message and the tool name go to our team via PostHog.\n\n### How to use Css Keyframe Timeline Editor\n\n1. Paste CSS or JSON using the example.\n2. Review the bounded report and assumptions.\n3. Download complete JSON or CSV.\n\n## Useful next steps\n\n- [Css Specificity Calculator](https://happytails.ai/en/developer-tools/css-specificity-calculator/) ([Markdown](https://happytails.ai/en/developer-tools/css-specificity-calculator.md))\n\n- [Css Cascade Debugger](https://happytails.ai/en/developer-tools/css-cascade-debugger/) ([Markdown](https://happytails.ai/en/developer-tools/css-cascade-debugger.md))\n\n- [Css Custom Property Resolver](https://happytails.ai/en/developer-tools/css-custom-property-resolver/) ([Markdown](https://happytails.ai/en/developer-tools/css-custom-property-resolver.md))\n\n## Use the documented input\n\nPreview and edit animation timing before exporting CSS\n"
}