css3 div 'pulse'

Question

how does one make a div/input flash or 'pulse' say for example a form field has an invalid value entered?

Answer 1

With CSS3 something like on this page, you can add the pulsing effect to a class called error:

@-webkit-keyframes error {
  from {
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    -webkit-transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
    -webkit-transform: scale(1.0);
    opacity: 0.75;
  }
}

.error { 
  opacity: 0.75; 
  -webkit-animation-name: error; 
  -webkit-animation-duration: 0.5s; 
  -webkit-animation-iteration-count: 10; 
}

A YouTube demo if you're not on Safari, Chrome or another browser the above works on. The demo makes use of :hover to start the animation.

You can add the above class to invalid entries.

For example, this is very simple with the jQuery validation plugin:

$(function() {
    $("form").validate();
});​

jsFiddle example