CSSトランジション：不透明ではありません。。

フェードインとフェードアウトの画像を使ってスライドショーを実装しようとしていました。CSSトランジション：不透明ではありません。。

しかし、フェージングの基本的なことは私のためには機能しません。 opacity属性は正常に動作します。これは固まっている不透明度の変化です。

私は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

あなたが開始不透明度を設定して、何かが起こったとき、別の不透明度に移行する必要があります。新しいopacityを設定する必要が移行をトリガーする

この動作を確認するには画像の上にマウスを移動に...

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

。 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

ここに1つの以上ソリューションは、イン・アウトフェードを持つ要素の背景の変更を使用しています効果：

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トランジション：不透明ではありません。。