类似于 Mac OS X 10.8 无效密码“摇晃”的 CSS 动画？答案

【问题标题】：CSS animation similar to Mac OS X 10.8 invalid password "shake"?类似于 Mac OS X 10.8 无效密码“摇晃”的 CSS 动画？
【发布时间】：2023-03-22 05:17:01
【问题描述】：

在 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;
}

【问题讨论】：

我不知道它是否完全正确，但看起来不错。
JQuery UI offers 你在找什么。查看他们的代码可能会让您受益。

标签： html macos css user-interface css-animations

【解决方案1】：

我用我的 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);
    }
}

【讨论】：

像个有魅力的人一样工作，谢谢。我只是将像素转换调整为 7px 和 4px 并将其加速 100 毫秒以满足我的需求。

【解决方案2】：

我也会给jRumble 一个机会，它有大量的震动，它们可以结合起来让各种疯狂的事情发生。一些有趣的例子：

【讨论】：