jQueryでbox-shadowをアニメーション化する正しい方法

質問

をアニメーション化するための正しい構文はどれでしょうか？ ボックスシャドウ プロパティをアニメーション化するために、jQueryを使用していますか？

$().animate({?:"0 0 5px #666"});

どのように解決するのですか？

直接回答

エドウィン・マーティンの jQuery プラグインを使用することで、シャドウアニメーションを行うことができます。 を拡張する .animate メソッドを拡張した場合、単に "boxShadow" で通常の構文を使用することができ、そのすべてのファセットは - 色 を使用することができます。 x-およびy-オフセット は ぼかし半径 と 拡散半径 - がアニメーションする。マルチシャドウのサポートも含まれています。

$(element).animate({ 
  boxShadow: "0px 0px 5px 3px hsla(100, 70%, 60%, 0.8)"
}); 

CSS アニメーションで代用する

jQueryのアニメーションは style プロパティを変更することによってアニメーション化します。これは、特異性に驚かされ、スタイル情報をスタイルシートから移動させる可能性があります。

CSS シャドウ アニメーションのブラウザ サポート統計を見つけることはできませんが、jQuery を使用してアニメーション ベースの クラス を適用することを検討してみてください。たとえば、スタイルシートで box-shadow アニメーションを定義することができます。

@keyframes shadowPulse {
    0% {
        box-shadow: 0px 0px 10px 0px hsla(0, 0%, 0%, 1);
    }

    100% {
        box-shadow: 0px 0px 5px 0px hsla(0, 0%, 0%, 0);
    }
}

.shadow-pulse {
    animation-name: shadowPulse;
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

その後、ネイティブの animationend イベントを使用して、アニメーションの終了を JS コードで行っていたことと同期させることができます。

$(element).addClass('shadow-pulse');
$(element).on('animationend', function(){    
    $(element).removeClass('shadow-pulse');
    // do something else...
});