Feedback

Creating feedback through animation illustrates to users that something is currently happening or has happened.

For this task, we're going to use keyframe animations to validate the form in our sidebar. The sidebar will respond to the user with an animation, depending on their input.

Similarly to the .show {} and .hide {} classes we used earlier, we've used some javascript to add the following classes to the login area:

.login.invalid {}
.login.valid {}

4.1 Giving feedback to the user when they enter incorrect information

For this example, we're asking the user to enter an email address, and press the 'login' button. How can we demonstrate to the user through animation that their email is invalid?

One way we could do this is through animation. I'm going to create an animation that causes the form to shake.

I can create a keyframe animation using transforms to create a shaking effect, like this:

@keyframes login-animation {

  from {
    transform: translate3d(0, 0, 0);
  }

  20% {
    transform: translate3d(-10px, 0, 0);
  }

  40% {
    transform: translate3d(10px, 0, 0);
  }

  60% {
    transform: translate3d(-10px, 0, 0);
  }

  80% {
    transform: translate3d(10px, 0, 0);
  }

  to {
    transform:  translate3d(0, 0, 0);
  }
}

Then I use this animation in my selector:

.login.invalid {
  animation: login-animation .5s;
}

4.2 Animating colours

Let's go a step further and draw attention to the incorrect input field, by using colours and transitions. We can fade the colour like so:

.login.invalid input {
  transition: border-color 1s;
  border-color: red;
}