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);
}
}
私は jRumble ショットも与えます、それは非常に大きなシェイクのセットを持っており、それらを組み合わせてあらゆる種類のクレイジーなことを起こすことができます。いくつかの楽しい例: