Beim ersten Bilderdurchlauf "blinkt" das Bild nach abgeschlossenem Übergang einmal kurz, aber leider doch störend auf. Bei den anschließenden Durchgängen funktioniert es wie gewollt.
Ich vermute, dass es daran liegt, dass die Bilder vorher nicht geladen werden bin mir aber nicht sicher (auch nicht wie man das fixen könnte), habt ihr Ideen woran es liegen könnte und mögliche Lösungen?
Hie hab ichs mal abgefilmt:
https://www.youtube.com/watch?v=W3iDx7GYkZY
Code: Alles auswählen
.maindiv{
margin: 10px 10px 10px 0;
height: 300px;
position: relative;
top: 150px;
left: 50%;
width: 90%;
transform: translate(-50%,-50%);
background-image: url("../static/pictures/Slides/a.png");
background-size: cover;
background-position: center;
box-shadow: 1px 2px 10px 5px grey;
animation: slider {{slide_Time}}s infinite linear ; /*slide_Time ist 5*Bilderanzahl */
border-radius: 10px;
}
@keyframes slider{
{% for percent, pic in slide_dict.items() %}
{{percent*100}}% {
background-image: url("../static/pictures/Slides/{{pic}}");
background-position: center;
}
{%endfor%}
}
Hannes