如何用CSS transition实现表单错误提示动画-css教程-PHP中文网

transition不能直接实现抖动动画，因其仅支持起点到终点的线性插值，无法生成多段往复位移（如0→8→−6→2→0）；必须使用@keyframes+animation配合完整关键帧周期（0%→25%→50%→75%→100%）和animation-fill-mode:forwards来实现警示性抖动效果。

如何用css transition实现表单错误提示动画

transition 不能直接实现抖动动画

抖动（shake）不是两个状态间的平滑过渡，而是多段位移的快速往复。transition 只能插值计算起点和终点之间的中间值，比如从 translateX(0) 到 translateX(8px)，它无法生成「0 → 8 → −6 → 2 → 0」这种非线性路径。强行用 transition: transform 0.4s 配合 JS 反复修改 style.transform，结果只会动一次，毫无抖感。

常见错误现象：:invalid 里写 transform: translateX(4px) 并加 transition，但用户看到的只是“偏移一下就停住”，不是警示性的震动。

必须改用 @keyframes + animation
transition 的合理用途是：错误提示框的淡入/缩放入场、边框颜色渐变、图标旋转等单向或缓入缓出效果
如果硬要用 transition 做“类抖动”，只能靠 JS 快速切换多个 class 触发连续过渡——但帧率难控、易卡顿，不推荐

:invalid:not(:focus) + transition 实现弹出式错误提示框

原生表单验证的 :invalid 伪类实时生效，一输错就触发，体验干扰大。真正可用的方案是结合 :not(:focus) 控制时机，并用 opacity、transform、visibility 配合 transition 实现柔和弹出。

把 transition 写在常态选择器上（如 .input-wrapper），而不是只写在 :invalid 里，否则退出时没动画
禁用 display: none —— 它不可过渡，会导致瞬间闪现或消失
推荐组合：visibility: hidden + opacity: 0 + transform: scale(0.95) → visibility: visible + opacity: 1 + transform: scale(1)
JS 中应在 blur 或 submit 时调用 checkValidity()，再手动切换 error-shown 类，避免依赖浏览器对 :invalid 的重绘节奏

transition 动画参数设置的关键细节

transition 看似简单，但几个参数稍不注意就会失效或表现异常：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

transition-property 别偷懒写 all —— 表单元素常带 box-shadow、border、background-color 等多属性变化，all 可能触发意外重绘；明确写成 transition: opacity 0.2s, transform 0.2s, border-color 0.15s
transition-duration 建议控制在 0.15s–0.3s 区间：太短（0.08s）人眼难识别，太长（0.6s）削弱错误提示的紧迫感
transition-timing-function 优先选 ease-in-out 或 cubic-bezier(0.25, 0.46, 0.45, 0.94)，避免 linear 显得机械，也别用 ease-in——起始太慢，警示感弱
务必测试 Safari：它对 :invalid 的样式更新不敏感，纯 CSS 方案容易漏掉动画帧，JS 主动控制类名更稳

为什么 shake 类要先 remove 再 add

连续提交失败时，如果只是反复执行 element.classList.add('shake')，浏览器大概率跳过重播动画——因为类名没变，CSS 引擎认为无需重绘。

正确做法是确保每次触发前清除旧状态：

element.classList.remove('shake');
void element.offsetWidth;（强制重排，不推荐，仅作备选）
更稳妥的是用 element.animate() API 直接触发动画，绕过 class 切换逻辑
或者给 animation 加 animation-name: shake; + animation-duration: 0.4s; + animation-fill-mode: forwards;，再用 JS 控制 animation-play-state