css3 div 'пульс'

Question

Как сделать вспышку div / input или «импульс»? Например, в поле формы введено неверное значение?

Answer 1

С помощью CSS3 что-то вроде на этой странице вы можете добавить пульсирующий эффект к классу 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 , если вы не используете Safari, Chrome или другой браузер, над которым работает выше.Демонстрация использует :hover для запуска анимации.

Вы можете добавить вышеупомянутый класс к недействительным записям.

Например, это очень просто с Плагин проверки jQuery :

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

jsFiddle пример