CSS-Animation ruckelt unter IE11, Chrome läuft

[htmlcssphp]

Nabend zusammen,
bitte schaut euch mal die Hintergrundanimation auf http://www.webergarten.de/test an.

Unter Chrome 41 läuft die Animation flüssig.
Unter IE 11 ruckelt die Animation.
Ich hoffe ihr könnt es nachstellen. Es sieht so aus als würde das Bild erst vertikal und anschließend horizontal vergrößert.

Habt ihr eine Idee woran das liegen könnte?
Hier der CSS-Code der Slideshow:

/* define slideshow */
.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}

/* duration of slideshow
numberOfImages x seconds
(6x12=72) */
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 72s linear infinite 0s;
    -moz-animation: imageAnimation 72s linear infinite 0s;
    -o-animation: imageAnimation 72s linear infinite 0s;
    -ms-animation: imageAnimation 72s linear infinite 0s;
    animation: imageAnimation 72s linear infinite 0s;
}

/* specify images and time to start animation */
.cb-slideshow li:nth-child(1) span {
    background-image: url(../bilder/slideshow/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../bilder/slideshow/2.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../bilder/slideshow/3.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../bilder/slideshow/4.jpg);
    -webkit-animation-delay: 36s;
    -moz-animation-delay: 36s;
    -o-animation-delay: 36s;
    -ms-animation-delay: 36s;
    animation-delay: 36s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../bilder/slideshow/5.jpg);
    -webkit-animation-delay: 48s;
    -moz-animation-delay: 48s;
    -o-animation-delay: 48s;
    -ms-animation-delay: 48s;
    animation-delay: 48s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../bilder/slideshow/6.jpg);
    -webkit-animation-delay: 60s;
    -moz-animation-delay: 60s;
    -o-animation-delay: 60s;
    -ms-animation-delay: 60s;
    animation-delay: 60s;
}

/* browser-specific animation for slideshow images
econdsPerPicturce/timeOfAnimation = animationCompleted
12/72 = 0.166 ~ 17% -> animation completed
half: start of animation -> fade in
double: end of animation -> fade out
0 and 100 -> invisible */
@-webkit-keyframes imageAnimation {
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
        transform: scale(1.05);
        -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1; transform: scale(1.1); }
    34% { opacity: 0; transform: scale(1.1); }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
        transform: scale(1.05);
        -moz-animation-timing-function: ease-out; }
    17% { opacity: 1; transform: scale(1.1); }
    34% { opacity: 0; transform: scale(1.1); }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
        transform: scale(1.05);
        -o-animation-timing-function: ease-out; }
    17% { opacity: 1; transform: scale(1.1); }
    34% { opacity: 0; transform: scale(1.1); }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
        transform: scale(1.05);
        -ms-animation-timing-function: ease-out; }
    17% { opacity: 1; transform: scale(1.1); }
    34% { opacity: 0; transform: scale(1.1); }
    100% { opacity: 0 }
}
@keyframes imageAnimation {
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
        transform: scale(1.05);
        animation-timing-function: ease-out; }
    17% { opacity: 1; transform: scale(1.1); }
    34% { opacity: 0; transform: scale(1.1); }
    100% { opacity: 0 }
}

/* Show last image if slideshow not supported */
.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}

Und noch eine weitere Frage.
Ich hatte mal ein Tool in dem alle (oder ziemlich viele) Browser in einer Art Sandbox genutzt werden konnten um eine Webseite zu überprüfen. Komme aber leider nicht mehr auf dem Namen.

Ich hoffe ich könnt mir in beiden Angelegenheiten helfen.
Vielen Dank!

 

[Tronjer]

Ich vermute mal, dass du diese CSS-Slideshow von irgendwo her kopiert hast. Wäre ich jetzt an deiner Stelle, würde mein Ansatz folgender sein:

1. Den Namen der Slideshow zusammen mit Begriffen wie 'IE stutter' bei Google eingeben. Zu 95% aller Fragen rund um die Webentwicklung finden sich Threads bei Stackoverflow.

2. Falls das nicht zum Erfolg führt, die CSS Slideshow rauswerfen und statt dessen einen jQuery-Slider mit Überblend-Effekt einbinden.

Solltest du experimentierfreudig sein, kannst du das auch mit JavaScript selber nachbauen. Der theoretische Ansatz ist ein Array von Bildern, die per CSS übereinander geschoben werden und bei denen alle - mit Ausnahme des ersten - unsichtbar sind. Die Opacity wird beim obersten Bild in Schritten von 0.1 langsam reduziert und analog dazu beim darunter liegenden um 0.1 erhöht. Wenn das erste bei 0.0 und das zweite bei 1.0 ist, werden die Bilder neu sortiert, so dass das oberste Bild an die letzte Stelle rückt.

 

[css_chaos]

Javascript ist eine gute Idee, vor allem dann, wenn du das ganze auch für ältere Internetbrowser auslegen möchtest, denn da kann es mit CSS-Animationen oft Probleme geben.