Nowhere in an interface is a user more tense than inside a form—handing over an email, a card number, a decision. And nowhere does feedback timing matter more. Motion in forms is not decoration; it is bedside manner.

Validate at the right moment

The cardinal sin is shouting “invalid email” while the user is still typing it. The polite pattern is reward early, punish late: check for validity on every keystroke so you can flip to a green check the instant the input becomes correct—but only show errors on blur, after the user has finished trying.

/* CSS can do the timing now */
input:user-valid {
  border-color: #16A34A;
}
/* :user-invalid waits for interaction — no shouting on load */
input:user-invalid {
  border-color: #DC2626;
  animation: shake .35s ease;
}
@keyframes shake {
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

The :user-valid/:user-invalid pseudo-classes are the platform catching up to good manners—they only match after the user has actually interacted, unlike :invalid, which insults empty required fields on page load.

“A form is a conversation. Interrupting mid-sentence to point out mistakes is rude in both.”

The vocabulary

The shake is a head-shake—one, small, 350ms; a violent wobble mocks the user. Submit buttons should acknowledge the press instantly (scale down, spinner in) because a silent second after clicking “Pay” is where double-submissions are born. And completion deserves ceremony—a drawn check, a brief settle—because the user just did the thing you built the form for. Respect the moment; skip the confetti cannon on a tax form.