CSS 过渡效果生成器
生成 CSS transition 过渡效果 — 设置属性、持续时间、延迟和缓动函数，并通过可悬停的实时预览查看效果，然后复制简写声明、完整的悬停规则和 HTML。默认包含 prefers-reduced-motion 代码块。
输入
预览会为你选择的属性应用对应的悬停变化。
缩放为倍数（1.1 = 110%）；位移单位为 px；旋转单位为度。
输出
过渡效果预览将显示在这里。
transition 声明
CSS
HTML
这对您有帮助吗？
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-transition-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"property": "background-color",
"duration": "300",
"delay": "0",
"timing": "ease",
"baseColor": "#3b82f6",
"hoverColor": "#8b5cf6",
"reducedMotion": "true"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-transition-generator` tool (CSS Transition Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-transition-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 过渡效果生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
CSS 的 transition 可以让属性变化逐步发生，而不是瞬间跳变。本生成器允许你选择要动画化的内容、持续时间、开始时间以及加速方式，然后在一个可悬停的方框上展示效果，方便你凭手感调整好之后再复制 CSS。
使用方法
- 选择属性，即要应用过渡的属性。
all会对所有发生变化的属性做动画；指定一个具体属性（如transform或background-color）更快速，也更可预测。 - 设置持续时间和延迟，单位为毫秒。对于悬停效果，150–300 ms 比较灵敏；较大的位移可以使用更长的时间。
- 选择时间函数。
ease-out适合进入的元素，ease-in适合离开的元素，linear适合颜色渐变和进度。选择自定义 cubic-bezier() 可自行设置四个控制点，或选择steps()实现分步效果。 - 调整悬停状态（颜色，以及对于
transform，缩放、位移或旋转的幅度），然后将鼠标悬停在预览上。 - 复制单行的
transition声明、完整的 CSS 规则或 HTML。
需要了解的事项
- 过渡写在默认状态上，因此鼠标移入和移出时都会触发。如果希望进入和离开的时间不同，可以在
:hover上设置不同的transition。 - 只有能计算出中间值的属性才会产生动画：颜色、长度、opacity、变换、阴影和滤镜。
display和height: auto不会产生动画。 - 优先使用
transform和opacity：浏览器可以在 GPU 上对它们做动画，无需重新计算页面布局。 - 生成的 CSS 默认包含
prefers-reduced-motion代码块，这样请求减少动效的用户就不会看到任何动画。如果你在其他地方已经处理了这一点，可以取消勾选。 - 如果需要可视化的曲线编辑器，可以试试 CSS Cubic Bezier 生成器。
css transitionhover effecteasingcubic-bezieranimationdurationdelaytransition-timing-functionfrontend