CSS Animation Example: Shake Error

The "Shake Error" is a universal interaction pattern used to indicate a failed form submission or invalid input, mimicking a person shaking their head "no."

This animation utilizes a highly specific @keyframes definition that rapidly changes the transform: translate3d() property back and forth across the X-axis. Since it's a short, fast animation, using a custom cubic-bezier timing function ensures it feels sharp and snappy rather than smooth.

Here is the code to create the Shake Error animation.

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0;
}

.shake-input {
    padding: 10px 15px;
    font-size: 1rem;
    border: 2px solid #ccc;
    border-radius: 5px;
    outline: none;
    transition: border-color 0.2s;
}

.shake-input.error {
    border-color: #dc3545;
    animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .shake-input.error {
        animation: none;
        /* Providing an alternative visual cue */
        background-color: #fff3f3;
    }
}
</style>

<p>Click the button to simulate a validation error.</p>
<input type="text" id="demoInput" class="shake-input" placeholder="Enter username">
<br>
<button onclick="document.getElementById('demoInput').classList.add('error'); setTimeout(() => document.getElementById('demoInput').classList.remove('error'), 1000);">
    Trigger Error
</button>

View Output

Accessibility Considerations

Rapid shaking can be particularly difficult for users with vestibular issues. For these users, an error state should still be visibly communicated without motion. We can use the prefers-reduced-motion media query to detect if the user has requested that their system minimize non-essential motion.

Here we halt the keyframes entirely and instead apply a static red background to the input to indicate an error.


@media (prefers-reduced-motion: reduce) {
    .shake-input.error {
        animation: none;
        /* Provide an alternative static visual cue */
        background-color: #fff3f3;
    }
}