要素をフルフルする

フルフルさせる要素を設置

  # フルフルさせる要素
  <div id="target">hello</div>

css

id targetで、箱みたいな要素を作成する shakeクラスではアニメーションをプロパティで動かせる animationの引数では、shakeの変数を見に行っていて、@keyframesで定義しているプロパティがフルフルさせている

   .shake{
      animation: shake .1s linear 10ms;
      width:50px;
      height:50px;
      background:#0091EA;
      margin:20px;
    }
    #target {
      width:50px;
      height:50px;
      background:#0091EA;
      margin:20px;
    }
    @keyframes shake {
      from {
        transform: translateX(-10%);
      }
      
      to {
        transform: translateX(20%);
      }
    }

jqueryでクラスの付け外しをする

hoverメソッドは二つの引数をもつらしい第一引数は、カーソルを当てた時第二引数は、カーソルを外した時の関数を記載する

      $('#target').hover(()=> {
        $('#target').addClass("shake")
        },() => {
          $('#target').removeClass("shake")
        }
      )

まとめ

フルフルさせているのは、transformプロパティ。 jqueryで、クラスを取り外ししてフルフルさせている

参考記事

CSS3 震える表現 | 使えるUIサンプルギャラリー kipure