CSS：悬停时为元素设置动画

Question

我在 Web 开发方面仍在成长，所以我希望这不会太过分 "noob"。我在网页上有一个徽标，我想在它悬停时使用 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;
}

但这没有用，然后我想到调用动画 class 我需要从库中的徽标 class 并且这涉及到我试图继承 css classes 在 css class 中，这是不可能的。

这个 answer 使用了 jquery 的方法来完成它，似乎是一个出路，但它也没有奏效。

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

Answer 1

当我使用 animate.css 时，我总是复制所需的 classes 并按我想要的方式使用它们。针对您的情况：

@-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 class 以保持动画效果。

@-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">

CSS：悬停时为元素设置动画

CSS: Animate an element on hover

jquery

css

wordpress

wordpress-theming

css-animations