【CSS】yStandardカスタマイズ・ヘッダーのロゴ部分にマウスオーバーで「ぶるぶる」するアニメーション

CSSを使ったカスタマイズです。

ロゴ画像をマウスオーバーした時に、小刻みにブルブル震えるエフェクトです。

以下追加CSSにコピペするとyStandardのロゴのCSSが適用されて、ロゴが震えます。

お使いのWordPressテーマのCSSセレクタに合わせてお使いください。

.custom-logo-link img {
    transition: transform 0.1s ease;
}
.custom-logo-link img:hover {
    animation: shake 0.1s infinite;
}
@keyframes shake {
    0% { transform: translateX(-2px) rotate(2deg); }
    25% { transform: translateX(2px) rotate(-2deg); }
    50% { transform: translateX(-2px) rotate(2deg); }
    75% { transform: translateX(2px) rotate(-2deg); }
    100% { transform: translateX(-2px) rotate(2deg); }
}

今日は簡単ですが以上ですー。