CSS过渡到淡入图像不起作用答案

【问题标题】：CSS transition to fade in image isn't workingCSS过渡到淡入图像不起作用
【发布时间】：2021-04-22 14:33:05
【问题描述】：

请您帮忙解决此 CSS 中的过渡问题吗？我的浏览器可以在检查器中看到代码，但没有发生转换。我尝试在不同的属性（包括宽度和位置）上操作过渡，但没有任何效果。

    #header-image {
    position: absolute;
    top: 30px;
    right: 30px;
    background: transparent;
    width: 250px;
    margin-left: 10px;
    opacity: 1;
    transition: opacity 2s linear 1s;
}

我知道我可能很厚，所以提前道歉。

【问题讨论】：

这能回答你的问题吗？ css transition opacity fade background
transition 仅在您更改属性时有效，如果您想在不更改属性的情况下为某些内容设置动画，那么您可能希望使用关键帧动画来代替
@Pete 非常感谢！我知道我是个白痴。关键帧动画符合我的要求，谢谢！

标签： css css-transitions

【解决方案1】：

为了让transition 工作.. 属性值应该改变。只有这样它才会触发过渡。
即）假设#header-image最初有opacity: 0; width: 50px;。
但是当你悬停它时，你想增加不透明度和宽度opacity: 1; width: 250px;

所以你的 css 看起来像..

    #header-image {
        position: absolute;
        top: 30px;
        left: 30px;
        background: blue;
        width: 100px;
        height: 100px;
        margin-left: 10px;
        animation: fadeIn 2s linear;
    }
    
    @keyframes fadeIn {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

&lt;div id="header-image"&gt;&lt;/div&gt;

然后您的过渡将起作用。所以基本上transition 只有在值发生变化时才会起作用。但在您的情况下，您最初默认设置 opacity:1。

如果您想在页面加载时添加此效果，则必须使用 css 动画或 javascript。下面我给出了一个例子 sn-p 是如何使用 css 动画来实现的。

但是，如果您打算使用许多动画，那么我建议您使用一些流行的库，例如 Animista、Animate.css, wow.js

【讨论】：

感谢您的解释！这就说得通了。如何让它随着页面加载而自动转换，而不需要用户操作？
如果您想在页面加载时执行此操作，您有 2 个选项。 1.) 你可以使用 javascript 来实现它。或 2.) 你可以使用 css 动画。
我将更新我上面的答案以包含 css 动画。