Input Error Shake Animation in CSS

Input Error Shake Animation In CSS
Code Snippet:Shaking input boxes
Author: Tyler Gordon
Published: January 12, 2024
Last Updated: January 22, 2024
Downloads: 1,093
License: MIT
Edit Code online: View on CodePen
Read More

This CSS code snippet helps you to create an error shake animation for input elements. When an error occurs in the input field, it triggers a shake animation to visually highlight the issue. Basically, the code provides classes to trigger shaking animation that you can add/remove to enable/disable animation during form validation.

This animation draws attention to the problematic input, making it easier for users to identify and correct errors during form submission.

How to Create Input Error Shake Animation in CSS

1. Inside the <div> with the class “form,” create a label and an input field with an associated ID. Add a button for demonstration purposes, which triggers the error animation.

<div class="form">
  <label for="name">What is your quest?</label><br>
  <input id="name" type="text" onChange="removeError()" placeholder="Nothing is right" />
  
  <div>
    <button onclick="addError();">Try anyway</button>
  </div>
</div>

2. Use the following CSS code to style your form. Ensure that the input field has a transition property for smooth animation. The keyframes ‘shake’ in the CSS create the animated effect when the ‘error’ class is added to the input.

* {
  box-sizing: border-box;
}

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 28px;
}

header {
  font-size: 14px;
  border-bottom: 1px solid #ccc;
  margin-bottom: 2rem;
}
header h1 {
  margin-bottom: 0;
}
header p {
  margin-top: 0;
}

.form {
  width: 50vw;
  margin: 1rem auto;
}
.form label {
  font-size: 1rem;
  vertical-align: middle;
}
.form input {
  width: 100%;
  font-size: 1rem;
  padding: 0.25rem;
  vertical-align: middle;
  box-shadow: 0 0 0 transparent;
  border: 1px solid #999;
  outline: 0 none;
  transition: box-shadow 0.5s;
}
.form input.error {
  -webkit-animation: shake 0.2s ease-in-out 0s 2;
          animation: shake 0.2s ease-in-out 0s 2;
  box-shadow: 0 0 0.5em red;
}

@-webkit-keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

@keyframes shake {
  0% {
    margin-left: 0rem;
  }
  25% {
    margin-left: 0.5rem;
  }
  75% {
    margin-left: -0.5rem;
  }
  100% {
    margin-left: 0rem;
  }
}

3. Finally, incorporate the JavaScript code to manipulate the input element. The ‘addError’ and ‘removeError’ functions toggle the ‘error’ class, initiating and halting the shake animation.

var element = document.getElementById('name');
var addError = function() { element.classList.add('error'); };
var removeError = function() { element.classList.remove('error'); };

That’s all! hopefully, you have successfully created a shake animation for inputs on your website. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X