CSS過渡：不透明度不透明。。

但是淡入淡出的基本功能對我來說是行不通的。不透明屬性工作正常。這是不透明度卡住的過渡。

我在使用XP SP3的舊PC上，如果這有什麼區別的話。我一直使用Firefox和Chrome作爲瀏覽器。但是我已經能夠在PC上看到其他人的淡入淡出了。所以我很好奇爲什麼我的fade-fiddle沒有按計劃運行。

所有想法正確的路徑歡迎。

HTML

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

    <body> 
    <br/> 
    <br/> 

     <div id="fadeDiv" > 
    <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: 0px auto 0px auto; 
     } 

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

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

} 

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

來源

2017-02-09 Trunk

你實際上並沒有做任何應用過渡。 –

你需要這樣的東西：http://stackoverflow.com/a/41593166/4206079但與圖片 – Banzay

您需要設置一個起點不透明度，然後有事時過渡到另一個不透明度。

將鼠標懸停在圖片看到這個動作......

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>

來源

2017-02-09 16:29:02 sol

要觸發你必須設置一個新的opacity的過渡。添加hover僞選擇器是一種簡單的方法來做到這一點，你也可以通過編程改變不透明度JS：

body { 
 
    background-position: center center; 
 
    text-align: center; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin: 0px auto 0px auto; 
 
} 
 
\t 
 
#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" /> 
 
\t </div> 
 
    </body> 
 
</html>

來源

2017-02-09 16:30:45

感謝您的答案。我需要比懸停激活的過渡更自動的東西。我使用了一個簡短的JS腳本，只要我考慮到轉換的時間安排，它的工作就足夠了。如果只有JSFiddle能夠可靠地工作，那麼我會告訴你完成的代碼，但事實並非如此。 – Trunk

下面是使用元素背景變化與淡入-出一個更解決方案效果：

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>

來源

2017-02-09 16:42:48 Banzay

根據您的建議分類。

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 fadeIn() 
     { 
      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="fadeIn()"> 
      <br/> 
      <br/> 

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

    </html> 
</body>

CSS

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

#fadeDiv{ 
    position: relative; 
    top: 0px; 
    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; 
}

來源

2017-02-10 18:20:44 Trunk

CSS過渡：不透明度不透明。 。

回答

相關問題

CSS過渡：不透明度不透明。。