{"uid":"cap_y87DzAGBsPVKgxFyfJNSb","slug":"css-animation-motion-toolkit-api-5b204212","name":"CSS Animation & Motion Toolkit API","description":"免費網頁動畫工具：cubic-bezier easing 產生器、彈簧動畫轉 CSS linear()、關鍵影格動畫產生器、流動漸層、背景影片 ffmpeg 壓縮指令、瀏覽器支援表、動畫無障礙檢查。","url":"https://motion.penguindriver.com/api/pro/motion-kit?utm_source=zero.xyz","method":"GET","headers":{},"bodySchema":{"type":"object","properties":{"input":{"type":"object"}}},"responseSchema":{"type":"json"},"example":null,"exampleRequest":null,"tags":["x402"],"displayCostAmount":"0.02","displayCostAsset":"USDC","priceDynamic":false,"priceHint":null,"priceStatus":"priced","priceSource":"probe","requiresHandshake":false,"reviewCount":0,"rating":{"score":"0.00","successRate":"0.00","reviews":0,"stars":null,"state":"unrated"},"availabilityStatus":"unknown","priceObserved":null,"sessionDeposit":null,"pricing":{"kind":"static","summary":"$0.02/call","primary":{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"},"accepted":[{"kind":"static","protocol":"x402","network":"base","amountUsd":"0.02","per":"call","confidence":"exact"}]},"paymentMethods":[{"uid":"pm_tCYCJ3GCQkwiKSCIFErFE","protocol":"x402","methodType":"crypto","chain":"base","mode":"charge","costAmount":"0.02","costPer":"request","priority":0,"asset":"0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913","unit":"request","depositMicros":null,"planRef":null}],"brandName":null,"brandSlug":null,"brandBaseUrl":null,"brandDocsUrl":null,"whatItDoes":"Generates CSS animation tools including cubic-bezier easing, spring-to-linear() conversion, keyframe animation, fluid gradients, ffmpeg video compression commands, browser support tables, and accessibility checks.","exampleAgentPrompt":"Can you generate a CSS spring animation using mass 1, stiffness 200, damping 20, and also give me the cubic-bezier easing code and check if it meets animation accessibility requirements?","exampleUseCases":[{"title":"Spring animation to CSS conversion","prompt":"I have a spring animation with mass 1, stiffness 180, damping 15 — can you convert that to a CSS linear() function I can drop into my stylesheet?"},{"title":"Background video ffmpeg compression","prompt":"I need an ffmpeg command to compress my hero background video for the web — can you generate one optimized for small file size and fast loading?"},{"title":"Fluid gradient CSS for landing page","prompt":"Generate a flowing animated gradient background in CSS using blues and purples for my landing page hero section."}],"resultDescription":"Returns JSON containing generated CSS code snippets (cubic-bezier, linear(), keyframes), ffmpeg compression commands, browser compatibility tables, and accessibility evaluation results for the requested animation or motion configuration.","failureModes":["Missing or invalid animation parameters may return empty or default results","Unsupported spring physics values may fail conversion to CSS linear()","Network timeout on the paid endpoint returning a 402 or 504","Malformed input object causing a 400 bad request","ffmpeg command generation may not cover all codec edge cases"],"whenToPreferThis":"Choose this endpoint when you need ready-to-use CSS animation code generation covering the full spectrum of web motion tools — easing curves, spring physics, keyframes, gradients, video compression, and accessibility — in a single API call rather than using multiple separate tools or manual calculation.","instructions":null,"reviewSummary":null,"reviewSummaryHighlights":null,"reviewSummaryConcerns":null,"reviewSummaryGeneratedAt":null,"activationCount":0,"lastUsedAt":null,"lastSuccessfullyRanAt":null,"lastHealthCheckAt":"2026-10-18T00:36:47.602Z","isFirstParty":false,"canonicalSlug":"css-animation-motion-toolkit-api-5b204212"}