[WordPress] CSS: マウスで要素をアニメーション化します。

スポンサーリンク

質問

まだ web 開発に成長午前これを願っていますので

があまりにも出てこない”noob”。Css ライブラリを使用してアニメーション化したいウェブページでロゴがあるとき、マウスが通過した上。

私はすでに使用しています デーン デン Animate.css ライブラリ、アニメーションと私を実装するエンキュー css 私のテーマの

functions.php

ファイル。最初に私は仕事をしたアニメーションのみにこれを好きに必要な:

 @keyframes pulse {
    /*The animations*/
    }

#logo.table-cell img:hover {
   -webkit-animation-name: pulse;
          animation-name: pulse;
}

がこれは働かなかったし、ロゴ クラス ライブラリから必要アニメーション クラスを呼び出すのだと思ったし、する関与私は css の css クラスを継承しようとクラスが可能ではなかった

この 答え 使用して行われ、うちの方法のように思えたそれを得るための jquery の方法があまりにも動作しませんでした

私をしないかもしれないもの正しい方法が私のワードプレスのサイトのテーマがカスタム CSS と js ファイルのフィールドを使用しています

答え

animate.css、私はいつもを使用するときに必要なクラスをコピーし、たいようなそれらを使用します。あなたの状況:

 
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.pulse:hover {
  -webkit-animation-name: pulse;
          animation-name: pulse;
}

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
 
<img class="pulse animated" src="http://www.beer100.com/images/beermug.jpg">

また、アニメーションを続けるには、

infinite

クラスを追加します

 
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

.pulse:hover {
  -webkit-animation-name: pulse;
          animation-name: pulse;
}

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
 
<img class="pulse animated infinite" src="http://www.beer100.com/images/beermug.jpg">

http://stackoverflow.com/questions/28393486/css-animate-an-element-on-hover

スポンサーリンク

Leave a Reply