在 Mac OS X 10.8 的“密码”屏幕上,如果您输入的密码无效,它会来回“摇动”(也就是左右摇动)。我正在尝试使用 CSS 动画为 HTML 密码输入字段实现类似的效果。
我创建了一个 "Password Shake" jsfiddle这似乎模仿了这种行为。但是,这似乎不太正确。我不确定显式关键帧和 linear
计时功能是否正确。这是我第一次尝试 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
而是执行 transform: 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 密码屏幕。看起来它每个方向摇晃 3 次,前 2 次走完整距离,最后 1 次走较短的距离。
#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);
}
}
关于html - 类似于 Mac OS X 10.8 无效密码 "shake"的 CSS 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15726000/