कीफ्रेम एनिमेशन सिंक में नहीं

सर्वर से नहीं, मेरे स्थानीय फाइल सिस्टम पर सही ढंग से काम करता है। यह किसी कारण से सिंक से शुरू हो रहा है। किसी भी मदद के लिए धन्यवाद। वेबकिट के लिए केवल वेंडर प्रीफिक्स्ड। क्रोम 26.Demo में परीक्षण किया गया: http://cssdesk.com/jjqKK कीफ्रेम एनिमेशन सिंक में नहीं

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>

सीएसएस:

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 
}

डेमो: http://cssdesk.com/jjqKK

कृपया कोई जवाब है कि जावास्क्रिप्ट का उपयोग करें। धन्यवाद!

स्रोत

2013-04-07 Mooseman

आप, मतलब है कि यह 'चमक' तीसरी स्लाइड jsbin उदाहरण देखें ? – Chris

मेरे क्रोम पर अच्छा लग रहा है। शायद शुरुआत में एक फ्लैश था, मैं नहीं कह सकता। –

@ क्रिस नहीं, यह यहां सिंक में नहीं है। उदाहरण के लिए, स्लाइड 1 3s के लिए दिखाता है, जबकि स्लाइड 2 1 से कम के लिए दिखाता है; फिर स्लाइड 1 फिर से दिखाई देने से पहले स्लाइड 3 के बाद देरी हो रही है। – Mooseman

आपकी एनिमेशन हमेशा एक ही समय में शुरू नहीं हो सकती है।

मुझे पता चला है कि नकारात्मक देरी चीजों को सिंक में रखने के साथ वास्तव में अच्छी तरह से काम करती है। इस तकनीक के साथ, प्रत्येक एनीमेशन एक ही समय में लोड होगा, लेकिन कुछ हिस्सों पिछले में शुरू करते हैं।

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

संपादित उदाहरण इनलाइन जोड़ने के लिए: एनीमेशन शुरू होने से पहले

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"> Image 1 \t <li> <img src="http://placehold.it/200x100"> Image 2 \t <li> <img src="http://placehold.it/200x100"> Image 3 </ul> </body> </html>

स्रोत

2014-01-17 00:02:18 helloworld

यहां काम करता है, धन्यवाद! – Mooseman

आप जावास्क्रिप्ट का उपयोग करते हुए एक एनीमेशन ट्रिगर जोड़ना होगा

Javascript demo

window.onload = function(){ }

या jQuery demo

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

CSS3 के एनिमेशन और संक्रमण के रूप में एस दस्तावेज़ लोड से पहले तुरंत शुरू करें।

स्रोत

2013-04-08 07:37:41

यहां विचार जेएस-फ्री होना है। – Mooseman

जो मैं बता सकता हूं, सीएसएस एनिमेशन को सिंक्रनाइज़ करने का यही एकमात्र तरीका है। कम से कम जेएस बहुत कम है। एकमात्र अन्य विकल्पों में बहुत अधिक जेएस शामिल होगा (कक्षाओं को जोड़ना/निकालना और संक्रमणों का उपयोग करना, सीएसएस कीफ्रेम एनिमेशन के बजाय)। यह किसी भी डाउनवॉट के लायक नहीं है। धन्यवाद, अहमद। –

हाय, आपके डेमो पर टूटी हुई लिंक .. कृपया आप अपने उदाहरण (कोड की पूरी लाइन) में आगे की व्याख्या कर सकते हैं, thx :) –

कीफ्रेम एनिमेशन सिंक में नहीं

उत्तर

संबंधित मुद्दे