技术博客
登录页里那种轻盈浮动的装饰小圆点、微粒或图标，靠 position: absolute 定位到 body 或登录容器内层，再用 transform: translateX() 和 translateY() 配合 animation 做无抖动位移最稳妥。别用 left/top 动画——重排开销大，尤其在移动端会卡顿。
直接通过 CDN 引入最稳妥，别下载后本地引用——除非你有离线部署或定制构建需求。官方推荐的 CDN 地址是 <a href="https://www.php.cn/link/b893c8c2eaa339c705d03677f0a184a0">https://www.php.cn/link/b893c8c2eaa339c705d03677f0a184a0</a>，注意版本号别写错，v4 和 v3 的类名不兼容。
很多人以为给 transition-delay 设不同值，就能让 width 先变、opacity 后变——实际不是这样。CSS 的 transition 是并行触发的：只要触发状态变化（比如 hover），所有满足条件的过渡都会同时开始，只是各自延迟不同、持续时间不同，视觉上可能错开，但**起始时刻仍是同一帧**。真要“先 A 再 B”，得靠 JS 控制类名切换节奏，或拆成多个独立动画。
HTML5 动画本身不提供“倍速播放”API，但 CSS 动画的播放速度完全由 animation-duration 决定——值越小，动画越快；越大则越慢。这不是“调节时间轴”，而是重设整个动画周期长度。
动画持续时间太短，核心就是调整 animation-duration 的值，单位用秒（s）或毫秒（ms），数值越大，动画越慢、越长。
元素用 position 定位后再加 transform 动画，容易出现位移“跳变”、起点错位、动画不连贯等问题。根本原因是 position（如 top/left）和 transform: translate() 作用于同一元素时，浏览器渲染逻辑不同，且二者会叠加影响最终布局位置，尤其在动画起始/结束帧或重排触发时表现明显。
HTML5 本身不提供专门的“动画缩放”标签，缩放效果完全依赖 CSS 的 transform 属性。最直接、兼容性最好、性能最优的方式就是用 scale() 函数。
HTML5 本身不提供“动画 API”，旋转效果依赖 CSS 的 transform 和 animation 或 JavaScript 控制。最直接、兼容性最好的方式是用 CSS rotate() 函数，作用于任意块级或行内元素（需设 display: inline-block 或以上）。
CSS 里给同一个元素写多条 animation 声明时，后写的会完全覆盖前写的，不会“叠加执行”。比如：
Sublime Text 原生不支持光标平滑移动（即光标在跳转时带动画过渡），它所有的光标跳转（如 Ctrl+G 跳行、Ctrl+P 搜索文件、方向键移动等）都是瞬时定位，没有缓动或插值动画。所谓“平滑移动”是用户对视觉连续性的误读，实际能配置的是：光标样式更醒目 + 光标跳转历史可回溯 + 移动响应更跟手——这三者组合起来，主观上会感觉“更顺、不突兀”。