卷轴式界面的呼吸感：CSS 缓动曲线的心流
清代书家包世臣在《艺舟双楫》中论及笔法：“逆入平出，便有气势；藏头护尾，方见含蓄。”
一段真正让人感到舒适的界面动效，其底层的物理运动轨迹与中国书法的运笔有着惊人的相通之处。很多人在写 CSS 动效时，习惯随手写一个transition: all 0.3s ease;或者linear。线性运动（Linear）机械冰冷，如同流水线上的机械臂；而默认的ease往往前段过于迟滞、中段突然加速，让人感到一种突兀的躁动。
在“卷轴式”的长流式界面中，界面元素的淡入、展开与位移需要一种温润的“呼吸感”。
贝塞尔曲线的微调：从行草笔势到三次贝塞尔
CSS 中的cubic-bezier(x1, y1, x2, y2)定义了一个由四个控制点确定的运动速率变化曲线。
在墨舟设计系统中，我们提炼了三组富有东方意境的核心缓动曲线：
落笔生根（Deceleration / Enter Curve）
cubic-bezier(0.05, 0.7, 0.1, 1.0)- 运笔隐喻：如同毛笔落纸瞬间的沉凝与聚力，前 15% 极速展开以迅速响应用户意图，后 85% 留出极其绵长平缓的减速过渡；
- 适用场景：对话气泡弹出、侧边抽屉滑出、卡片悬浮展开。
提笔离纸（Acceleration / Exit Curve）
cubic-bezier(0.3, 0.0, 0.8, 0.15)- 运笔隐喻：笔尖提离绢帛时的决绝与轻盈，先沉后疾，迅速消失不拖泥带水；
- 适用场景：弹窗关闭、元素销毁、菜单收起。
流水行云（Standard Movement / Flow Curve）
cubic-bezier(0.4, 0.0, 0.2, 1.0)- 运笔隐喻：行草字势之间的连带牵丝，起承转合自然流畅；
- 适用场景：列表项位置交换、折叠面板伸缩、主题明暗过渡。
:root { /* 墨舟核心缓动曲线变量 */ --ease-ink-enter: cubic-bezier(0.05, 0.7, 0.1, 1.0); --ease-ink-exit: cubic-bezier(0.3, 0.0, 0.8, 0.15); --ease-ink-flow: cubic-bezier(0.4, 0.0, 0.2, 1.0); /* 呼吸动效时长阶梯 */ --duration-quick: 180ms; --duration-normal: 320ms; --duration-deliberate: 560ms; } /* 对话消息卡片优雅滑入 */ .chat-message-item { opacity: 0; transform: translateY(16px) scale(0.98); animation: inkSlideIn var(--duration-normal) var(--ease-ink-enter) forwards; } @keyframes inkSlideIn { to { opacity: 1; transform: translateY(0) scale(1); } }错峰渲染（Staggered Animation）与视觉韵律
当一个列表或多张卡片同时渲染时，如果所有元素在同一毫秒以相同的动画一起弹出，视觉冲击力会显得粗暴刺眼。
传统长卷展现画卷时，总是由右向左徐徐展开。我们在前端实现中应当引入错峰延迟（Stagger Delay）：
- 为列表中的每个子元素赋予细微的延时差（如每个元素间隔
40ms）； - 整体形成一种类似多米诺骨牌或水波荡漾般的涟漪秩序。
@for $i from 1 through 10 { .card-item:nth-child(#{$i}) { animation-delay: #{$i * 40}ms; } }动效的物理边界与克制
最后必须牢记：动效是信息的盛器，绝不能喧宾夺主。
- 位移幅度要克制：微交互的
translateY建议控制在8px ~ 20px之间，过大的位移会产生晕动症； - 属性选择要纯粹：坚决只对
transform和opacity施加过渡动画，绝不在动画中改变width、height、top或margin，确保动画完全在 GPU 合成层完成，不触发主线程 Reflow； - 尊重用户的系统偏好：通过
@media (prefers-reduced-motion: reduce)为开启了减弱动画选项的用户直接禁用平移，直接显示静态结果。
给界面以呼吸，给交互以韵律，让代码在屏幕上舒展出东方美学的平和与笃定。
