js或css抖动或闪烁按钮元素,抖动表单验证填写不规范的字段,让错误提示更友好shake动画animation

js或css抖动或闪烁按钮元素,抖动表单验证填写不规范的字段,让错误提示更友好shake动画animation

css shake 动画例子 demo代码参考

测试抖动效果

按钮抖动shake动画 animation

主要按钮

表单验证的时候，抖动填写不正确的字段：

预定日期

用户就能清楚的知道哪个地方填错了。交互更友好。

demo对于的css样式、 抖动shake keyframes animation动画 css代码:

js代码:

注意事项：inline内联元素，会导致动画不正常工作，请换用 block 元素、或者inline-block元素

如果你css动画没执行，最好检查一下dom元素是不是 inline 内联元素，一般换成 block 块元素，就能正常执行动画了。