CSS动画类似于Mac OS X 10.8无效的密码“摇动”？ [英] CSS animation similar to Mac OS X 10.8 invalid password "shake"?

问题描述

在Mac OS X 10.8密码屏幕上，如果输入无效的密码，它将来回摇晃（也就是左右摇晃）。我尝试使用CSS动画为HTML密码输入字段实现类似的效果。

我创建了一个密码抖动jsfiddle 似乎模仿这种行为。然而，它似乎不太对。我不确定明确的关键帧和线性计时功能是正确的方法。这是我第一次尝试CSS动画，我正在寻找反馈，以正确的方式实现这一点。

HTML p>

 < div class =box> 
< input type =passwordid =demo-passwordplaceholder =passwordautofocus /> 
< / 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; 
 / *还需要动画和-moz-animation * / 
 -webkit-animation：shake .6s linear; 
} 
 / *还需要关键帧和-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（），这可能有更好的机会加速硬件。 / p> 
 
 
  .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; 
} 
  
 
 
解决方案
记录Mac pasword屏幕。它看起来像每个方向摇动3次，前2个完全距离，最后1次的距离较小。
 ＃demo-password.invalid {
 outline-color：red; 
 / *还需要动画和-moz-animation * / 
 -webkit-animation：shake .5s linear; 
} 
 / *还需要关键帧和-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）; 
} 
} 
  
 
On the Mac OS X 10.8 "password" screen, if you enter an invalid password, it will "shake" back and forth (a.k.a. left and right).  I am trying to achieve an similar effect for an HTML password input field using CSS animations.

I created a "Password Shake" jsfiddle that seems to emulate this behavior.  However, it doesn't seem quite right.  I'm not sure the explicit keyframes and the linear timing function are the right approach.  This is my first attempt at a CSS animation, and I'm looking for feedback on the right way to achieve this.

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




Edit

I did find Animate.css which has a shake animation.  I've included the (non browser prefixed) CSS below.  Instead of setting left is does a transform: translateX(), which likely has a better chance for hardware acceleration.
.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;
}

解决方案
I used my iPad camera to record the Mac pasword screen.  It looks like it shakes 3 times each direction, with the first 2 going the full distance and the last 1 time a lesser distance.
#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);
    }
}


                        
这篇关于CSS动画类似于Mac OS X 10.8无效的密码“摇动”？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！