在Mac OS X 10.8“密码”屏幕上，如果您输入的密码无效，则会“来回”(左键和右键a.k.a)。我正在尝试使用CSS动画为HTML密码输入字段实现类似的效果。
我创建了一个似乎模仿这种行为的“Password Shake” jsfiddle。但是，似乎不太对。我不知道明确的关键帧和线性时序功能是正确的方法。这是我第一次尝试CSS动画，我正在寻找正确的方式来获得反馈。
HTML
<div class="Box"> <input type="password" id="demo-password" placeholder="password" autofocus /> </div>
JavaScript的
$('#demo-password').on('keyup',function (e) {
var $input = $(this);
var val = $.trim($input.val());
$input.removeClass("invalid");
if (e.which !== 13 || !val) {
return;
}
if (val != "password") {
$input.select();
$input.addClass("invalid");
}
});
CSS
#demo-password.invalid {
outline-color: red;
/* also need animation and -moz-animation */
-webkit-animation: shake .6s linear;
}
/* also need keyframes and -moz-keyframes */
@-webkit-keyframes shake {
0% {
left:-10px;
}
16% {
left:9px;
}
33% {
left:-6px;
}
50% {
left:5px;
}
66% {
left:-2px;
}
83% {
left:1px;
}
100% {
left: 0px;
}
}
编辑
我确实发现Animate.css有一个摇动动画。我在下面列出了(非浏览器前缀)CSS。而不是设置left是一个转换：translateX()，这可能有更好的机会加速硬件。
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
@keyframes shake {
0%,100% {transform: translateX(0);}
10%,30%,50%,70%,90% {transform: translateX(-10px);}
20%,40%,60%,80% {transform: translateX(10px);}
}
.shake {
animation-name: shake;
}
解决方法
我用我的iPad相机录制Mac pasword屏幕。它看起来像是每个方向都摇动3次，前2个是全程，最后一次是较小的距离。
#demo-password.invalid {
outline-color: red;
/* also need animation and -moz-animation */
-webkit-animation: shake .5s linear;
}
/* also need keyframes and -moz-keyframes */
@-webkit-keyframes shake {
8%,41% {
-webkit-transform: translateX(-10px);
}
25%,58% {
-webkit-transform: translateX(10px);
}
75% {
-webkit-transform: translateX(-5px);
}
92% {
-webkit-transform: translateX(5px);
}
0%,100% {
-webkit-transform: translateX(0);
}
}
