Question

我在网络开发方面仍在发展，所以我希望这不会出现“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;
}

但这不起作用然后我想到从徽标类的库中调用我需要的动画类，这涉及到我试图在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">

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

1 个答案: