HTML中使用CSS的cubic-bezier自定义动画缓动曲线的参数配置-html教程-PHP中文网

cubic-bezier() 的 x1、x2 必须在 [0,1] 内，否则被静默降级为 ease；y1、y2 可越界实现弹性效果，但建议控制在 [-0.5,1.5] 内以防跳变；调试时可通过 chrome 动画面板曲线预览判断 x 值是否越界。

html中使用css的cubic-bezier自定义动画缓动曲线的参数配置

cubic-bezier() 的四个参数不是随便填的数字，x1 和 x2 必须严格落在 [0, 1] 区间内，否则整条声明会被浏览器静默丢弃、降级为 ease；y1 和 y2 可以越界（比如负值或大于 1），这是实现过冲、回弹的唯一合法方式，但超出 [-0.5, 1.5] 就容易在低端设备上跳变。

为什么写了 `cubic-bezier()` 却没生效

最常见原因是 x1 或 x2 越界。例如：cubic-bezier(-0.1, 0.2, 0.8, 1)、cubic-bezier(0.3, 0.1, 1.05, 0.9)——Chrome、Firefox、Safari 都会直接忽略该声明，computed 样式里显示的仍是 ease，不报错也不警告。

调试时打开 Chrome DevTools 的「Animations」面板，点开时间函数预览图：如果显示为直线而非曲线，基本就是 x 值越界了。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

检查是否被其他 CSS 覆盖：比如父级写了 transition: all 0.3s ease，子级只写 transition-duration 没写 transition-timing-function，就会继承父级
确认属性本身支持过渡：如 display、z-index、height（未设 overflow: hidden）等无法触发视觉变化，改了也看不出效果
避免在简写 transition 中混用多个 timing function：transition: width 0.3s cubic-bezier(), height 0.3s; 会让后者继承前者的缓动，容易误判

`cubic-bezier()` 的 y 值越界怎么用才不出问题

y1 和 y2 越界是模拟物理弹性（如按钮按压回弹、卡片悬浮）的必要手段，但必须控制幅度，否则数学上成立，视觉上失控：

按钮按压回弹推荐：cubic-bezier(0.2, 0.7, 0.4, 1.2) —— y2 = 1.2 是安全上限，再高（如 1.6）在 Android WebView 或 Safari 16.3 以下可能首帧猛冲
卡片悬浮弹性推荐：cubic-bezier(0.68, -0.55, 0.265, 1.55) —— y1 = -0.55 提供轻微反向启动感，y2 = 1.55 是临界值，真机测试过多数机型可稳住
避免 y1 或 <code>y2 > 1.6：尤其在 300ms 以内短动画中，极易变成“抽搐”，Safari 对负 y 更敏感，iOS 15 之前可能直接 fallback 到 linear

`transition` 和 `@keyframes` 里写法差异

语法一样，但作用位置和控制粒度完全不同：

transition 中直接写在简写里：transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1); ✅
@keyframes 中不能把 cubic-bezier() 写进 from/to 块内部：to { animation-timing-function: cubic-bezier(); } ❌ 无效
正确写法是写在调用处：.box { animation: slide 300ms cubic-bezier(0.2, 0.8, 0.4, 1); } ✅
想让不同关键帧段落用不同节奏？只能拆成多个独立 @keyframes 动画，CSS 不支持单个动画内分段设 animation-timing-function

真正容易被忽略的是：cubic-bezier() 控制的是「时间节奏」，不是「运动路径」——哪怕你写 cubic-bezier(0.5, -800, 0.5, 800)，元素也还是直线位移，只是加速度极端夸张而已。要走贝塞尔曲线路径，得换 offset-path 或 SVG，别在 timing function 上死磕轨迹。