網頁動畫工具箱
CSS 漸層、動畫與網頁互動效果產生器。
我该使用它吗
质量与安全性
发现（5）
- LOWTool 'generate_easing' description lacks action verb在 generate_easing 中
- LOWTool 'spring_to_css_linear' description lacks action verb在 spring_to_css_linear 中
- LOWTool 'web_video_ffmpeg' description lacks action verb在 web_video_ffmpeg 中
- LOWTool 'animation_a11y_checklist' description lacks action verb在 animation_a11y_checklist 中
- LOWTool 'compare_animation_libraries' description lacks action verb在 compare_animation_libraries 中
基于对工具定义和协议合规性的自动分析。
上下文开销
这是每次将服务器的工具加载到模型上下文窗口时所消耗的大致 token 数。数值越高，可用于其他任务的注意力就越少。
安装
一键安装
将以下内容添加到你的 `claude_desktop_config.json` 文件中：
{
"mcpServers": {
"web-motion": {
"url": "https://tw-web-motion.panda198271.workers.dev/mcp"
}
}
}远程端点
https://tw-web-motion.panda198271.workers.dev/mcpstreamable-http它能做什么
工具清单
工具（8）
⚪generate_easing(name, x1, y1, x2, y2)
產生 CSS cubic-bezier 緩動曲線：用名稱（easeOutCubic、easeInOutBack、materialStandard 等 32 種）或四個控制點，回傳 CSS、Web Animations API 範例與取樣點。
输入模式
{
"type": "object",
"properties": {
"name": {
"type": "string"
},
"x1": {
"type": "number"
},
"y1": {
"type": "number"
},
"x2": {
"type": "number"
},
"y2": {
"type": "number"
}
}
}⚪spring_to_css_linear(stiffness, damping, mass)
把彈簧物理參數（stiffness、damping、mass）模擬後轉成 CSS linear() 緩動函式與建議時間。
输入模式
{
"type": "object",
"properties": {
"stiffness": {
"type": "number"
},
"damping": {
"type": "number"
},
"mass": {
"type": "number"
}
}
}⚪generate_keyframes(preset, duration, delay, iterations, easing)
產生 CSS @keyframes 動畫（含減少動態模式）。preset：fadeIn,fadeInUp,fadeInDown,slideInLeft,slideInRight,zoomIn,pulse,bounce,shake,spin,float,heartbeat,flipIn,blurIn,typing
输入模式
{
"type": "object",
"properties": {
"preset": {
"type": "string"
},
"duration": {
"type": "number"
},
"delay": {
"type": "number"
},
"iterations": {
"type": "string"
},
"easing": {
"type": "string"
}
},
"required": [
"preset"
]
}⚪generate_gradient(colors, type, angle, animate, speed)
產生 CSS 漸層（linear、radial、conic），可選流動動畫與漸層文字。colors 用逗號分隔 HEX。
输入模式
{
"type": "object",
"properties": {
"colors": {
"type": "string"
},
"type": {
"type": "string"
},
"angle": {
"type": "number"
},
"animate": {
"type": "boolean"
},
"speed": {
"type": "number"
}
},
"required": [
"colors"
]
}⚪web_video_ffmpeg(width, fps, quality, audio, input, ...)
產生網頁背景影片壓縮的 ffmpeg 指令（H.264、VP9、AV1、poster）與 HTML video 語法。
输入模式
{
"type": "object",
"properties": {
"width": {
"type": "number"
},
"fps": {
"type": "number"
},
"quality": {
"type": "string",
"enum": [
"high",
"balanced",
"small"
]
},
"audio": {
"type": "boolean"
},
"input": {
"type": "string"
},
"output": {
"type": "string"
}
}
}⚪animation_browser_support
網頁動畫功能瀏覽器支援版本：View Transitions、捲動驅動動畫、linear()、@starting-style、Web Animations API。
输入模式
{
"type": "object",
"properties": {}
}⚪animation_a11y_checklist
網頁動畫無障礙與效能檢查清單（WCAG 2.2.2、2.3.1、2.3.3、prefers-reduced-motion、CLS、LCP），附全站減少動態 CSS。
输入模式
{
"type": "object",
"properties": {}
}⚪compare_animation_libraries
比較網頁動畫工具：CSS、Web Animations API、GSAP、Motion、Anime.js、Lottie、Rive、Three.js、Lenis 的授權與適用情境。
输入模式
{
"type": "object",
"properties": {}
}社区
证据