技术博客
用 position: relative 时，元素仍占原文档流位置，位移不影响其他元素；用 position: absolute 后，元素脱离流，父容器必须设 position: relative 或 absolute 才能以它为参考系。动画起点若需“原地出发再滑走”，选 relative；若要“从屏幕某固定区域飞入”，比如右上角通知，就得用 absolute 配合 top/right 定位。
直接写 opacity: 0 → opacity: 1 循环，常遇到“闪一下就停”或“根本不动”，根本原因是没设 animation-fill-mode 和 animation-iteration-count。浏览器默认只播一次、结束后回退到初始状态，看起来就像没动。
直接通过 CDN 引入最稳妥，别下载后本地引用——除非你有离线部署或定制构建需求。官方推荐的 CDN 地址是 <a href="https://www.php.cn/link/b893c8c2eaa339c705d03677f0a184a0">https://www.php.cn/link/b893c8c2eaa339c705d03677f0a184a0</a>，注意版本号别写错，v4 和 v3 的类名不兼容。
常见原因是元素没有触发渲染层（render layer），或被其他 transform 覆盖。scale() 属于 transform，它不会影响文档流，但必须作用在支持 transform 的元素上（如 div、img 等块级或替换元素）。如果目标元素是 inline（比如默认的 span），需先加 display: inline-block 或 block。
动画持续时间太短，核心就是调整 animation-duration 的值，单位用秒（s）或毫秒（ms），数值越大，动画越慢、越长。
CSS动画循环不平滑，通常不是因为animation-iteration-count或ease-in-out用错了，而是它们的组合方式、关键帧设计或时间函数匹配出了问题。单纯加infinite和ease-in-out反而容易在首尾衔接处产生“顿挫感”。
按钮的 hover 动画只触发一次，通常是因为默认情况下 CSS 动画只播放一帧。要让动画在每次鼠标悬停时都能重复播放，关键在于正确设置 animation-iteration-count 并配合合适的触发机制。
动画结束后样式“跳回”是因animation-fill-mode默认为none，需设为forwards才能保持 […]
清屏动画可通过五种方法实现：一、CSS淡出；二、CSS缩放；三、位移+透明度组合；四、Canvas覆盖；五、S […]
动画CSS加载失败主因是外部资源接入问题，需检查link路径准确性、文件真实存在与服务器可访问性、标签位置合理 […]