添加 CSS 缓入和缓出过渡以更改图像答案

【问题标题】：Adding CSS ease-in and ease-out transition for changing images添加 CSS 缓入和缓出过渡以更改图像
【发布时间】：2015-05-02 00:32:16
【问题描述】：

当您将鼠标悬停在徽标上时，我正在尝试添加简单的缓入和缓出效果。我知道有关于这个的帖子。我尝试了许多不同的 CSS 组合，但似乎无法让它发挥作用。

我已通过使用此 CSS 代码更改悬停时的内容成功更改了徽标颜色：

#dealertrackr-image.et_pb_image:hover {
content: url('image url');
}

当它悬停在上面时，标志会从黑白状态变为彩色状态。我现在希望它在悬停和释放悬停时具有 1 秒的缓入和缓出。我试过的都没有用。

http://www.nationalgalactic.com/divisions/

【问题讨论】：

标签： html css

【解决方案1】：

如果您所希望的只是灰度，您可能还对加载全彩色图像并使用 CSS 过滤器在悬停时去饱和/重新饱和感兴趣。

这结合 CSS 过渡将创建一个漂亮的小淡入淡出：

img {
    -webkit-filter: grayscale(100%);
    filter: gray; filter: grayscale(100%);
    filter: url(desaturate.svg#greyscale);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    transition: all .25s ease;
}
img:hover {
    -webkit-filter: grayscale(0%);
    filter: none;
}

*编辑这是一个纯 CSS 解决方案，但在 Android Jellybean 和 Internet Explorer 中不完全支持。如果完整的浏览器支持对您很重要，请参阅 isherwood 在同一篇文章中的回答。为了获得全面支持，您的解决方案仅限于堆叠图像或 javascript。

【讨论】：

还不错，除了 IE 和 Jelly Bean Android。 caniuse.com/#search=grayscale
好点。如果完全支持很重要（总是如此），那么 isherwood 在上面涉及堆叠褪色图像的正确答案。唯一的缺点是对每张图片的双重请求。

【解决方案2】：

对图像执行此操作的唯一方法是堆叠元素并转换顶层的不透明度。浏览器不进行图像到图像的转换。

类似这样，锚点有背景图片：

a {
  display: inline-block;
  background: url(http://lorempixel.com/400/150/nature) left top no-repeat;
}
a img {
  transition: opacity 1s;
}
a:hover img {
  opacity: 0;
}

<a href="#">
    <img src="http://lorempixel.com/400/150/nature/2" alt="">
</a>

Here's a demo 与您的代码和图像。

【讨论】：

我喜欢这种方法，很简单