CSS 图像淡入淡出的过渡效果不佳

Question

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

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

我知道我可能太胖了所以提前道歉。

Answer 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;
      }
    }

<div id="header-image"></div>

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

如果要在页面加载时添加此效果，则必须使用 css 动画或 javascript。下面我给出了一个示例片段，说明如何使用 css 动画实现它。

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

CSS 图像淡入淡出的过渡效果不佳

CSS transition to fade in image isn't working

css

css-transitions