Keyframe-Animationen nicht synchron

Funktioniert ordnungsgemäß auf meinem lokalen Dateisystem, nicht von einem Server. Es startet aus irgendeinem Grund nicht synchron. Danke für jede Hilfe. Nur Anbieter mit Präfix für WebKit. Getestet in Chrome 26.Demo: http://cssdesk.com/jjqKK Keyframe-Animationen nicht synchron

HTML:

<ul class="slides"> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 1</span></li> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 2</span></li> 
    <li><img src="http://placehold.it/200x100" /><span class="caption">Image 3</span></li> 
</ul>

CSS:

ul.slides{ 
    position: relative; 
    background: #000; 
    height: 100px; 
    width: 200px; 
    padding: 0; 
} 
ul.slides li{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    height: inherit; 
    width: inherit; 
    padding: 0; 
    margin: 0; 
    -webkit-animation: slideshow 9s linear infinite; 
} 
ul.slides.clickpause:active li{ 
    -webkit-animation-play-state:paused; 
} 
ul.slides li:nth-child(1){ -webkit-animation-delay: 0s; } 
ul.slides li:nth-child(2){ -webkit-animation-delay: 3s; } 
ul.slides li:nth-child(3){ -webkit-animation-delay: 6s; } 
@-webkit-keyframes slideshow{ 
0%{ 
    opacity: 0; 
    z-index: 2; 
} 
3%{ 
    opacity: 1; 
} 
30%{ 
    opacity: 1; 
} 
33%{ 
    opacity: 0; 
} 
34%{ 
    z-index: 1; 
} 
100%{ 
    opacity: 0; 
} 
} 
ul.slides li img{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    padding: 0; 
    margin: 0 
} 
ul.slides li span{ 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    background: rgba(40, 40, 40, 0.8); 
    color: #FFF; 
    padding: 5px 
}

Demo: http://cssdesk.com/jjqKK

Bitte keine Antworten, die JavaScript verwenden. Vielen Dank!

Quelle

2013-04-07 Mooseman

Sie Bedeuten es blinkt "die dritte Folie, bevor die Animation beginnt ? – Chris

Sieht gut aus in meinem Chrome. Vielleicht gab es am Anfang einen Blitz, kann ich nicht sagen. –

@Chris Nein, hier ist es nicht synchron. Z. B. zeigt Folie 1 für 3s, während Folie 2 für weniger als 1s zeigt; Dann gibt es eine Verzögerung nach Folie 3, bevor Folie 1 erneut angezeigt wird. – Mooseman

Ihre Animationen werden möglicherweise nicht immer gleichzeitig gestartet.

Ich habe festgestellt, dass negative Verzögerungen wirklich gut funktionieren, wenn man die Dinge synchron hält. Mit dieser Technik wird jede Animation zur gleichen Zeit geladen, aber einige Teile beginnen in der Vergangenheit. Schauen Sie sich die jsbin Beispiel aus:

http://jsbin.com/EreYIdE/2/edit

bearbeitet Beispiel Inline hinzuzufügen:

ul { 
 
    background: #000; 
 
    height: 100px; 
 
    padding: 0; 
 
    position: relative; 
 
    width: 200px; 
 
} 
 

 
li { 
 
    height: inherit; 
 
    margin: 0; 
 
    opacity: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: inherit; 
 
    
 
    -webkit-animation: slideshow 9s linear infinite; 
 
    animation: slideshow 9s linear infinite; 
 
} 
 

 
li:nth-child(1) { 
 
    -webkit-animation-delay: -9s; 
 
    animation-delay: -9s; 
 
} 
 

 
li:nth-child(2) { \t 
 
    -webkit-animation-delay: -6s; 
 
    animation-delay: -6s; 
 
} 
 

 
li:nth-child(3) { \t 
 
    -webkit-animation-delay: -3s; 
 
    animation-delay: -3s; 
 
} 
 

 
@-webkit-keyframes slideshow { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    3% { 
 
    opacity: 1; 
 
    } 
 
    30% { 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes slideshow { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    3% { 
 
    opacity: 1; 
 
    } 
 
    30% { 
 
    opacity: 1; 
 
    } 
 
    33% { 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
img { 
 
    margin: 0; 
 
    padding: 0; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
} 
 

 
span { 
 
    background: rgba(40, 40, 40, 0.8); 
 
    color: #fff; 
 
    padding: 5px; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset=utf-8 /> 
 
<title>JS Bin</title> 
 
</head> 
 
<body> 
 
<ul> 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <span>Image 1</span> 
 
\t 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <span>Image 2</span> 
 
\t 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <span>Image 3</span> 
 
</ul> 
 
</body> 
 
</html>

Quelle

2014-01-17 00:02:18 helloworld

Funktioniert hier, danke! – Mooseman

Sie müssen eine Animation Trigger Javascript

Javascript demo

window.onload = function(){ }

oder jQuery demo

$(window).load(function(){})

als CSS3 Animationen und Übergang hinzufügen s beginnt unmittelbar vor dem Laden des Dokuments.

Quelle

2013-04-08 07:37:41

Die Idee hier ist JS-frei. – Mooseman

Von dem, was ich sagen kann, ist dies die einzige Möglichkeit, CSS-Animationen zu synchronisieren. Zumindest ist der JS sehr minimal. Die einzigen anderen Alternativen würden viel mehr JS beinhalten (Hinzufügen/Entfernen von Klassen und Verwenden von Übergängen anstelle von CSS-Keyframe-Animationen). Dies verdient keine Downvotes. Danke, Ahmad. –

Hallo, link gebrochen auf Ihre Demo ... bitte erklären Sie weiter in Ihrem Beispiel (vollständige Zeile des Codes), thx :) –

Keyframe-Animationen nicht synchron

Antwort

Verwandte Themen