animation - CSS3 格 'pulse'

Question

如何使 div/input 闪烁或“脉冲”？例如，假设表单字段输入了无效值？

Answer 1

使用 CSS3 类似 on this page ，您可以将脉冲效果添加到名为 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 如果您使用的不是 Safari、Chrome 或其他浏览器，上述内容也适用。该演示使用 :hover 来启动动画。

您可以将上述类添加到无效条目。

例如， jQuery validation plugin 就很简单了:

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

jsFiddle example