html - 如何在 html 中为图像悬停替换创建缓入缓出？

Question

这是我目前在我们网站的各个部分使用的图像替换代码，用于替换悬停图像。我的问题是如何将 ease-in-out .5s 添加到现有代码，或将替代 CSS 代码添加到我们的样式表以在整个网站中使用。我希望在图像之间创建更平滑的过渡。预先感谢您的帮助。

<img src="https://gingerhippo.com/wp-content/uploads/2018/04/GingerHippo-Search-Services-3-1.jpg" 
     onmouseover="this.src='https://gingerhippo.com/wp-content/uploads/2018/04/Ginger-Hippo-Search-Services-1-1.jpg'" 
     onmouseout="this.src='https://gingerhippo.com/wp-content/uploads/2018/04/GingerHippo-Search-Services-3-1.jpg'"
>

在我们的主页上，您将看到 7 个不同的图像悬停替换图像，所有图像都没有过渡时间。我已经成功地为我们的博客和行业文章页面上看起来像按钮的东西创建了背景转换，但无法为我们的主页图像复制该过程。

再次提前感谢您的帮助。我已经坚持了几个月。

Answer 1

将两个图像放在一个外部 block 元素中。

<section>
    <img class="bottom" src="img.png">
    <img class="animation" src="img-2.png">
</section>

外在是相对的，内在是绝对的。

section {
  position: relative;
}

section img {
    position: absolute;
}

创建动画并将其应用到顶部元素。

.animation {
    animation-name: fade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-direction: alternate;
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 1;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

现在，如果您想编辑动画效果，请在 .animation 中进行更改。

来源:https://www.taniarascia.com/crossfade-between-two-images-with-css-animations/