更改图像 css jquery 的动画答案

【问题标题】：Animation on change image css jquery更改图像 css jquery 的动画
【发布时间】：2015-10-01 20:02:51
【问题描述】：

我有一个社交按钮，可以在悬停时更改图像。它工作正常

<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");
}

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

【问题讨论】：

试试这个ianlunn.github.io/Hover
@ArunKumar 我很乐意。但我只是需要简单的动画，不想加载整个 CSS 悬停脚本。不过谢谢

标签： jquery css animation css-transitions

【解决方案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

【讨论】：

谢谢 :) 将选择此作为答案 :)

【解决方案2】：

你可以做很多不同的动画，我创建了一个简单的旋转动画here

诀窍是在定义它的悬停状态之前在元素上包含过渡属性：

.social-fb{
    transition: 750ms ease-in-out;
}

750ms 是动画的持续时间，ease-in-out 是一个缓动设置，使它看起来更平滑、更逼真。

然后设置你想要的变换/动画，这里我将图标旋转360度

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

还值得考虑开始使用Font Awesome 图标而不是图像来代替 Facebook 图标之类的东西，它们是免费的、完美缩放、比图像加载更快，您还可以让背景从颜色淡化到接下来，check out this pen to see an example

【讨论】：