登录失败时出现抖动效果

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”

背景

窗口抖动效果在很多地方都有应用，这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。同时也可以将它引入到登录当中，当登陆失败的时候就会出现抖动效果，这不但有动感，而且让人感觉新颖。

实现思路

代码很简单，原理也非常简单。当点击按钮的时候，拿到输入框的值，校验value值，不通过则使用js给输入框加一个class即可。通过css写几个关键帧，实现动画，控制动态类名实现点击抖动。 至于为什么使用css，而不是使用js？这都什么年代了，css才是最花里胡哨的。还有就是transform不会引起重绘。

关键性代码

//设置动画名，动画函数和动画时间
.errors {
    animation-name: dd;
    animation-duration: .5s ;
    animation-timing-function: ease-in-out;
    border: 1px solid  #B54300;

}
//这里是设置动画
@keyframes dd {
    0%, 100% {
        transform: translateX(0);
    }
10%, 90% { transform: translateX(-1px); }

20%, 80% { transform: translateX(2px); }

30%, 70% { transform: translateX(-4px); }

40%, 60% { transform: translateX(4px); }

50% { transform: translateX(-4px); }

}



var form = document.getElementById('loginform');
var email = form.querySelector('.input');
const password = form.querySelector(".password1")
var formIsValid = true;

form.addEventListener('submit', function (e) {
	e.preventDefault();
  formIsValid = email.value === '11' && password.value ==='11'
	if (!formIsValid) {
  email.classList.add('errors');
  password.classList.add("errors")

  setTimeout(()=>{
   email.classList.remove('errors');
  password.classList.remove("errors")
  },2000)
  }
});

code.juejin.cn/pen/7148414…

额外知识点

CSS3 动画是什么？动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to" ，等同于 0% 和 100% 。 0% 是动画的开始， 100% 是动画的完成。