CSS-Übergang: Deckkraft tritt nicht ein. .

Ich habe versucht, eine Diashow mit ein- und ausgeblendeten Bildern zu erstellen.CSS-Übergang: Deckkraft tritt nicht ein. .

Aber die grundlegende Sache der Einblendung wird nicht für mich arbeiten. Das Opazitätsattribut funktioniert einwandfrei. Es ist der Übergang der Deckkraft, der feststeckt.

Ich bin auf einem alten PC mit XP SP3, wenn das einen Unterschied macht. Ich habe Firefox und Chrome als Browser verwendet. Aber ich konnte die verblassenden Fideln anderer Leute auf diesem PC sehen. Also ich bin gespannt, warum mein fade-fiddle nicht wie geplant läuft.

Alle Ideen für den richtigen Weg willkommen.

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

Quelle

2017-02-09 Trunk

Sie sind nicht wirklich etwas den Übergang anwenden zu tun. –

benötigen Sie etwas wie folgt: http://Stackoverflow.com/a/41593166/4206079 aber mit Bildern – Banzay

Sie benötigen eine Start Opazität zu setzen, und dann zu einem anderen Opazität Übergang, wenn etwas passiert.

Hover auf das Bild, um zu sehen, diese in Aktion ...

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>

Quelle

2017-02-09 16:29:02 sol

den Übergang Sie einen neuen opacity setzen müssen auszulösen. ein hover Pseudo-Selektor Hinzufügen ist eine einfache Möglichkeit, dies zu tun, können Sie auch die Undurchsichtigkeit programmatisch in JS ändern:

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>

Quelle

2017-02-09 16:30:45

Vielen Dank für die Antworten. Ich brauchte etwas Automatischeres als einen über den Hover aktivierten Übergang. Ich habe ein kurzes JS-Skript verwendet und - solange ich das Timing von Übergängen in Betracht ziehe - funktioniert es akzeptabel genug. Ich würde Ihnen den fertigen Code zeigen, wenn nur JSFiddle zuverlässig funktioniert, aber nicht. – Trunk

Hier eine mit verblasst mehr Lösung Element Hintergrund ändert In-Out ist Effekt:

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>

Quelle

2017-02-09 16:42:48 Banzay

Sortiert nach Ihrem Rat.

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

Quelle

2017-02-10 18:20:44 Trunk

CSS-Übergang: Deckkraft tritt nicht ein. .

Antwort

Verwandte Themen