CSSのwiggle/shakeのエフェクト

Question

私がやろうとしている効果： - 数回振ってウィグルを止めてください。マウスが動かされるまでこの動作を定期的に行います。 - 揺らめくと、ウィグルの動きが完全に停止します。 - すべての遷移が滑らかです。 私は-webkit-animationキーフレームで試しましたが、マウスが動かなくなったときの遷移を簡単にするために-webkit-animation-timing-functionを使用しました。 また、私は、ウィグル、ストップ、およびウィグルの期間運動を達成する方法については迷っています。 正しい方向を指摘できれば幸いです。

Answer 1

次のいずれかを試してみてください。

.class:hover { 
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; 
    transform: translate3d(0, 0, 0); 
    backface-visibility: hidden; 
    perspective: 1000px; 
} 

@keyframes shake { 
    10%, 90% { 
    transform: translate3d(-1px, 0, 0); 
    } 

    20%, 80% { 
    transform: translate3d(2px, 0, 0); 
    } 

    30%, 50%, 70% { 
    transform: translate3d(-4px, 0, 0); 
    } 

    40%, 60% { 
    transform: translate3d(4px, 0, 0); 
    } 
} 

https://css-tricks.com/snippets/css/shake-css-keyframe-animation/

または スクリプトにこれを追加：<link type="text/css" href="https://rawgit.com/elrumordelaluz/csshake/master/dist/csshake.min.css"></link>

をそして、あなたは

を振るしたい要素にクラスを追加します。完全なドキュメンテーション：https://elrumordelaluz.github.io/csshake/

Answer 2

ここでは、簡単なウィグルアニメーションを上に移動すると停止します。

ウィグル間の遅延を実現するには、アニメーションの「空きチャンク」、つまり何も変化しない期間を含めることができます。私の例では、0％と80％の間では何も変わらず、最後の20％（「30秒」に終わる）でのみ「ウィグル」が発生します。

@keyframes wiggle { 
 
    0% { transform: rotate(0deg); } 
 
    80% { transform: rotate(0deg); } 
 
    85% { transform: rotate(5deg); } 
 
    95% { transform: rotate(-5deg); } 
 
    100% { transform: rotate(0deg); } 
 
} 
 

 
h1.wiggle { 
 
    display: inline-block; 
 
    animation: wiggle 2.5s infinite; 
 
} 
 

 
h1.wiggle:hover { 
 
    animation: none; 
 
}

<h1 class="wiggle"> 
 
    wiggle, wiggle 
 
</h1>

あなたはそれ半ばアニメーションの上にマウスを置く場合は残念ながら、これはバック非ウィグル状態に「緩和」を考慮していません。そうするには少しのJavaScriptが必要かもしれません。