jquery - 改变图像CSS jquery的动画

Question

我有一个社交按钮，可以在悬停时更改图像。运行良好

Fiddle

<a href="#">
  <img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb "/>
</a>

我的CSS:

.social-fb:hover {
   content:url("http://i.imgur.com/bU0lzac.png");
}

但是我怎样才能制作一些动画，比如当我悬停时，随着图像的变化，会有一个动画。任何动画都可以。谢谢!

Answer 1

您可以使用以下 css 来执行脉冲:

.social-fb:hover {
  content: url("http://i.imgur.com/bU0lzac.png");
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes pulse {
  from {
    -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);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -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);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

<a href="#">
  <img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb " />
</a>

<a href="#">
  <img src="http://i.imgur.com/bU0lzac.png" />
</a>

JSFiddle