相关疑难解决方法(0)

在Mac OS X 10.8"密码"屏幕上,如果输入无效密码,它将来回"摇动"(又称左右).我试图使用CSS动画为HTML密码输入字段实现类似的效果.

我创建了一个"密码摇动"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% { …