jquery - CSS:在悬停时为元素设置动画

Question

我在 Web 开发方面仍在成长，所以我希望这不会太“菜鸟”。我在网页上有一个 Logo ，我想在它悬停时使用 css 库制作动画。

我正在使用 Dane Den's Animate.css库来实现动画，我已经在我的主题的 functions.php 文件中加入了 css。起初我尝试只使用我需要的动画，如下所示:

 @keyframes pulse {
    /*The animations*/
    }

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

但这行不通，然后我想到在 Logo 类上从库中调用我需要的动画类，这涉及到我试图在 css 类中继承 css 类，这是不可能的。

这answer使用 jquery 方式完成它，似乎是一种出路，但它也没有用。

我可能没有以正确的方式做事，但我正在使用我的 wordpress 网站主题的自定义 CSS 和 JS 字段。

Answer 1

当我使用 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">