CSS如何使文字具有果冻一样的弹性触感动画

果冻形变核心是用transform+scale()配合贝塞尔缓动cubic-bezier(0.68,-0.55,0.27,1.55)实现压缩回弹，需设transform-origin为center bottom、display:inline-block，并加animation-fill-mode:forwards和will-change:transform。

用 transform + scale() 模拟果冻形变核心逻辑

果冻动画本质不是靠文字本身“抖”，而是对文字容器做带阻尼感的缩放+位移组合。纯 text-shadow 或 filter 无法产生真实弹性反馈，必须用 transform 配合贝塞尔缓动曲线。

关键在 cubic-bezier(0.68, -0.55, 0.27, 1.55) —— 这个负值起始斜率和超调终点让动画先压缩再回弹，像按压果冻。直接写 ease-in-out 会显得僵硬。

• 只对 inline 元素（如 <span></span>）加动画时，需先设 display: inline-block，否则 transform 在部分浏览器中不生效
• 避免对 <p></p> 或 <div> 整体加动画：块级元素缩放会引发重排，导致文字换行错乱 <li>移动端要注意：iOS Safari 对 <code>transform: scale() 的 subpixel 渲染有毛刺，建议加 will-change: transform 提前提示合成层

:hover 触发时文字突然跳动？检查 transform-origin

果冻动画一 hover 就偏移、文字“飞走”，大概率是默认 transform-origin: 50% 50% 在文字基线处缩放造成的视觉错位。中文和英文字体基线位置不同，更易出问题。


纳米漫剧流水线
360推出的国内首个工业级AI漫剧生产平台
下载
• 统一设为 transform-origin: center bottom，让缩放锚点落在文字底部中心，形变更自然
• 若文字含下划线或 descender（如 g、y），可微调为 transform-origin: center calc(100% + 0.1em) 避免拉伸时切断
• 绝对不要用 left/top 做位移补救：这会触发 layout，破坏硬件加速

用 @keyframes 写果冻动画但没效果？确认是否遗漏 animation-fill-mode

CSS 动画播完立刻回退到初始状态，看起来像“没动”或“闪一下”。果冻动画需要保持最后一帧的轻微拉伸感（模拟余震），否则失去弹性反馈的真实感。

立即学习“前端免费学习笔记（深入）”；

• 必须加 animation-fill-mode: forwards，否则 transform 会在动画结束瞬间归零
• 慎用 animation-direction: alternate：来回播放会让果冻感变成机械摆动，真实触感依赖单向挤压→回弹→微晃
• 如果用 JS 控制触发（如点击），记得用 element.style.animation = 'jelly 0.6s cubic-bezier(...) forwards'，内联样式优先级高于 CSS 类

移动端点击无响应？touch-action 和 pointer-events 冲突

iOS 上文字区域点击后动画不动，常见原因是父容器设置了 touch-action: pan-y（比如轮播图、滚动区），阻止了 :hover 和 :active 的触发。

• 给果冻文字加 touch-action: manipulation，明确告诉浏览器“这里只做轻量交互”
• 避免在文字外层套 pointer-events: none 的遮罩层——这是很多 UI 框架（如某些弹窗组件）的默认行为
• 真机调试时，用 Safari 开发者工具检查 :hover 状态是否被识别：iOS 不支持悬停，必须改用 :active 或 JS ontouchstart
果冻动画的复杂点不在代码长度，而在于每一处缓动参数、锚点位置、触发时机都得对齐人眼对“软物体受力”的直觉。少调一个 0.05em 的 transform-origin 偏移，或者误用 ease 替代自定义贝塞尔，果冻就变成橡皮泥。