CSS Animation Shake Error Example

<!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>