下划线动画需将 transform-origin 设为 center 于伪元素上，配合 width: 0 和 scaleX(0)→scaleX(1) 实现中点展开；父元素为 inline 时须用 absolute 定位+translateX(-50%) 居中，避免原点偏移。
下划线动画用
但始终只从左端展开？
因为默认的
是
（或
），
→
实际是“从左往右拉伸”，不是“从中点向两边铺开”。要实现中间出发的展开，必须显式把原点设到水平中心。
对伪元素
或
，加
或
确保该元素宽度初始为
（比如
），且
或
若父元素是
（如
），伪元素需设
并配合
居中定位，否则
原点会按父容器盒模型计算，可能偏移
在
上无效？
直接写在
标签上没用——下划线通常是用伪元素模拟的，
必须作用于那个伪元素本身。而且，如果伪元素用
初始化，再缩放，它会先占满再缩小，视觉上仍是“从左缩到中间”，而不是“从中间长出来”。
正确做法：伪元素初始
，
，再通过
过渡到
必须同时设
在伪元素上，不能只靠
补偿
注意浏览器兼容性：
在旧版 Safari 中对
元素伪元素支持不稳定，建议外层包一层
的容器
动画卡顿或闪烁？检查这些渲染属性
纯
动画本应是 GPU 加速的，但一旦触发重排（reflow）就会掉帧。常见诱因：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
伪元素未设
（尤其在复杂页面中，提前提示浏览器优化）
父元素有
且伪元素超出边界，导致裁剪干扰合成层
使用了
配合
，造成 position 和 transform 双重定位冲突
动画时长过短（如
）或过长（
以上），人眼易感知起止突兀；推荐
～
+
模拟弹性收尾
响应式下
错位？
当容器宽度动态变化（比如窗口缩放），而伪元素宽度固定（如
），
就不再对应文字中点。此时不能依赖绝对宽高，得让伪元素宽度跟随内容。
立即学习
“
前端免费学习笔记（深入）
”；
给伪元素设
，但前提是父元素（如
）已设
或
，否则
无效
更稳妥：用
初始态，过渡到
，靠
始终锚定中点，不依赖 width 百分比计算
避免在媒体查询里重复写
，它本身是响应式的，只要伪元素盒模型实时居中，原点就自然有效
实际中最容易被忽略的是：伪元素的
必须和它的盒模型中心一致，而这个“中心”由它的
、
、
共同决定——不是文字的中心，也不是父元素的中心，是它自己的。
scaleXtransform-originleft center0% 50%scaleX(0)scaleX(1)::after::beforetransform-origin: center;transform-origin: 50% 50%;0width: 0;display: block;inline-block;inlineposition: absolute;left: 50%; transform: translateX(-50%);centertransform-origin: centertransform-originwidth: 100%width: 0;transform: scaleX(0);transitionscaleX(1)transform-origin: center;left: 50%transform-origininlinedisplay: inline-block;scaleXwill-change: transform;overflow: hidden;top / lefttransform0.1s0.8s0.3s0.4scubic-bezier(0.34, 1.56, 0.64, 1)transform-origin: centerwidth: 100pxcenterwidth: 100%;display: inline-block;display: table;100%transform: scaleX(0) translateX(-50%);scaleX(1) translateX(-50%);translateX(-50%)transform-origintransform-originwidthheightposition