テキストホバー「ゆれる」

実装サンプル

Hover me

実装手順など解説

transform:translateXで左右に動くkeyframeをつくりそれを適用。揺れ幅は5px→3px→2pxと徐々に小さくしている。

動作環境

• ○:動作する
• △:動作するが意図せぬ挙動
• ☓:動作しない

-	Mac			Windows11				SP
ブラウザ	Chrome	Firefox	Safari	Chrome	Firefox	Edge	IE	Safari on iOS	Chrome for Android
対応	○	○	○	○	○	○	○