web-dev-qa-db-ja.com

Mac OS X 10.8に似たCSSアニメーションの無効なパスワード「シェイク」？

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;
}
_
htmlmacoscssuser-interfacecss-animations
23
Kevin Hakanson

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);
    }
}
58
Kevin Hakanson

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

0
Lyuben Todorov