时间戳

首页 > 解决方案 > CSS过渡到淡入图像不起作用

css - CSS过渡到淡入图像不起作用

问题描述

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

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

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

标签： csscss-transitions

解决方案

为了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

推荐阅读