CSS 过渡：不透明度不出现。答案

【问题标题】：CSS transition: opacity not kicking in .CSS 过渡：不透明度不出现。
【发布时间】：2017-06-27 18:14:37
【问题描述】：

我试图用淡入淡出的图像实现幻灯片。

但是淡入的基本方法对我不起作用。 opacity 属性工作正常。卡住的是不透明度的过渡。

我在一台装有 XP SP3 的旧 PC 上，如果这有什么不同的话。我一直在使用 Firefox 和 Chrome 作为浏览器。但我已经能够在这台 PC 上看到其他人的褪色小提琴。所以我很好奇为什么我的fade-fiddle 没有按计划运行。

欢迎所有通往正确道路的想法。

HTML

    <!DOCTYPE html>
        <title>Test Fade</title>

    <body>
  <br/>
  <br/>
    
        <div class="fade-div" >
    <img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" />
        </div>

    </body>

CSS

body {
       background-position: center center;
       text-align: center;
       width: 250px;
       height: 250px;
       margin: 0 auto;
    }
    
    .fade-div {
      position: relative;
      top: 0;
    }

    img {
      height: 200px;
      width: 200px;

   }

   .fade-in {
      opacity: 1;
      transition: opacity 2s linear;
   }

【问题讨论】：

您实际上并没有做任何事情来应用过渡。
你需要这样的东西吗：stackoverflow.com/a/41593166/4206079 但有图片

标签： css image fade

【解决方案1】：

您需要设置一个起始不透明度，然后在发生某些事情时过渡到另一个不透明度。

将鼠标悬停在图片上以查看实际效果...

jsfiddle

body {
  background-position: center center;
  text-align: center;
  width: 250px;
  height: 250px;
  margin: 0px auto 0px auto;
}
#fadeDiv {
  position: relative;
  top: 0px;
  opacity: .5;
  transition: opacity 2s linear;
}
#fadeDiv:hover {
  opacity: 1;
}
img {
  height: 200px;
  width: 200px;
}

<div id="fadeDiv">
  <img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" />
</div>

【讨论】：

【解决方案2】：

要触发转换，您必须设置一个新的opacity。添加hover 伪选择器是一种简单的方法，您还可以在 JS 中以编程方式更改不透明度：

body {
  background-position: center center;
  text-align: center;
  width: 250px;
  height: 250px;
  margin: 0px auto 0px auto;
}
	
#fadeDiv {
  position: relative;
  top: 0px;
}

img {
  height: 200px;
  width: 200px;
}

/* changes opacity on hover and triggers transition */
img:hover {
  opacity: 0.5;
}

.fade-in{
  opacity: 1;
  transition: opacity 2s linear;
}

<html>
  <title>Test Fade</title>
  <body>
    <div id="fadeDiv" >
      <img class="fade-in" src="https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg" />
	</div>
  </body>
</html>

【讨论】：

感谢您的回答。我需要比悬停激活过渡更自动的东西。我使用了一个简短的 JS 脚本，并且——只要我考虑到转换的时间——它的效果就可以接受了。如果只有 JSFiddle 可靠地工作，我会向您展示完成的代码，但事实并非如此。

【解决方案3】：

这里是另一种使用淡入淡出效果的元素背景变化的解决方案：

body {background-position: center center;
         text-align: center;
       width: 250px;
         height: 250px;
         margin: 0px auto 0px auto;
        }

#fadeDiv{
    position: relative;
    top: 0px;
}

.fade-in {
    height: 200px;
    width: 200px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url("https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg");
    animation: bgFadeInOut 8s ease-in-out infinite;
}

@keyframes bgFadeInOut {
    0% {
       background-image: url("https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg");
    }
    34% {
       background-image: url("http://lorempixel.com/output/people-q-c-200-200-7.jpg");
    }
    66% {
       background-image: url("http://lorempixel.com/output/people-q-c-200-200-1.jpg");
   }
    100% {
       background-image: url("https://atlassociety.org/images/marilyn-monroe-ayn-rand-admired.jpg");
    }

}

   <body>
  <br/>
  <br/>

        <div id="fadeDiv" >
    <div class="fade-in"></div>
        </div>

</body>

【讨论】：

【解决方案4】：

按您的建议排序。

HTML/JS

     <!DOCTYPE html>
    <html>
        <meta charset="utf-8" />
        <title>Test Fade</title>
        <link href="css/test2-style.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript">function fadeInOut()
        {
            var img = document.getElementById("photo");
            setInterval(function()
            {
                img.className = "fade-in"; // Fade in over 2 secs
                setTimeout(function()
                {
                    img.className = "fade-out"; // Fade out after 2 secs
                }, 2000);
            }, 4000); // Cycle whole process every 4 secs
        }
        </script>
    
        <body onload="fadeInOut()">
            <br/>
            <br/>
    
            <div class="fade-div">
                <img id="photo" class="" width="200" height="200" 
                src="https://www.gannett-cdn.com/presto/2018/10/01/USAT/d806e46a-c0b6-4ffb-84a3-8dfad6a3447b-AP_Marilyn_Monroe_Auction.JPG" />
            </div>
        
    </html>
</body>

CSS

body {
    background-position: center center;
    text-align: center;
    width: 250px;
    height: 250px;
    margin: 0 auto;
    }
    
.fade-div{
    position: relative;
    top: 0;
    width: 200px;
    height: 200px;
}

img{
    height: 200px;
    width: 200px;
    opacity: 0;
}

.fade-in{
    opacity: 1;
    transition: opacity 2s linear;
}

.fade-out{
    opacity: 0;
    transition: opacity 2s linear;
}

【讨论】：