CSS3 एनिमेशन के साथ पृष्ठभूमि छवि बदलना

Question

यह क्यों काम नहीं कर रहा है? मैं क्या गलत कर रहा हूं?

सीएसएस

@-webkit-keyframes test { 
    0% { 
    background-image: url('frame-01.png'); 
    } 
    20% { 
    background-image: url('frame-02.png'); 
    } 
    40% { 
    background-image: url('frame-03.png'); 
    } 
    60% { 
    background-image: url('frame-04.png'); 
    } 
    80% { 
    background-image: url('frame-05.png'); 
    } 
    100% { 
    background-image: url('frame-06.png'); 
    } 
} 

div { 
    float: left; 
    width: 200px; 
    height: 200px; 
    -webkit-animation-name: test; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-iteration-count: 2; 
    -webkit-animation-direction: alternate; 
    -webkit-animation-timing-function: linear; 
} 

डेमो

http://jsfiddle.net/hAGKv/

अग्रिम धन्यवाद!

Answer 1

पृष्ठभूमि छवि ऐसी संपत्ति नहीं है जिसे एनिमेटेड किया जा सके - आप संपत्ति को नहीं जोड़ सकते हैं।

इसके बजाय, स्थिति का उपयोग कर एक दूसरे के शीर्ष पर सभी छवियों को डालने का प्रयास करें: पूर्ण, फिर उन सभी को अस्पष्टता को एनिमेट करें जिन्हें आप बार-बार चाहते हैं।

Answer 2

उपरोक्त वर्णित की तरह, आप एनीमेशन में पृष्ठभूमि छवियों को नहीं बदल सकते हैं। मुझे आपकी छवियों को एक स्प्राइट शीट में रखने का सबसे अच्छा समाधान मिला है, और उसके बाद पृष्ठभूमि की स्थिति बदलकर एनिमेट किया गया है, लेकिन यदि आप मोबाइल के लिए निर्माण कर रहे हैं, तो आपकी स्प्राइट शीट 1 9 00x1900 पीएक्स से कम तक सीमित है।

Answer 3

यह क्रोम 19.0.1084.41 बीटा में काम करता है!

तो भविष्य में किसी बिंदु पर, कीफ्रेम वास्तव में ... फ्रेम हो सकता है!

आप भविष्य में जी रहे हैं;)

Answer 4

खैर मैं उन्हें क्रोम में बदल सकते हैं। यह सरल और क्रोम में -webkit सीएसएस गुणों का उपयोग कर ठीक काम करता है।

Answer 5

आप इस कोड से पालन कर सकते हैं:

#cd{ 
 
    position: relative; 
 
    margin: 0 auto; 
 
    height: 281px; 
 
    width: 450px; 
 
} 
 
#cf img{ 
 
    left: 0; 
 
    position: absolute; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
#cf img.top:hover{ 
 
    opacity: 0; 
 
}

<div id="cf"> 
 
    <img class="button" src="Birdman.jpg" /> 
 
    <img src="Turtle.jpg" class="top" /> 
 
</div>

Answer 6

यह तेजी से और गंदा वास्तव में है, लेकिन यह काम किया जाता है: jsFiddle

#img1, #img2, #img3, #img4 { 
    width:100%; 
    height:100%; 
    position:fixed; 
    z-index:-1; 
    animation-name: test; 
    animation-duration: 5s; 
    opacity:0; 
} 
#img2 { 
    animation-delay:5s; 
    -webkit-animation-delay:5s 
} 
#img3 { 
    animation-delay:10s; 
    -webkit-animation-delay:10s 
} 
#img4 { 
    animation-delay:15s; 
    -webkit-animation-delay:15s 
} 

@-webkit-keyframes test { 
    0% { 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
    } 
    100% { 
    } 
} 
@keyframes test { 
    0% { 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
    } 
    100% { 
    } 
} 

मैं काम कर रहा हूँ jQuery का उपयोग करके मेरी साइट के लिए कुछ समान है, लेकिन जब उपयोगकर्ता पृष्ठ को स्क्रॉल करता है तो संक्रमण ट्रिगर होता है - jsFiddle

Answer 7

linear समय कार्य परिभाषित गुणों को रैखिक रूप से एनिमेट करेगा। पृष्ठभूमि-छवि के लिए ऐसा लगता है कि आपके एनीमेशन के फ्रेम को बदलते समय यह फीका/आकार बदलता है (सुनिश्चित नहीं है कि यह मानक व्यवहार है, तो मैं @ चुकी बी के दृष्टिकोण के साथ जाऊंगा)।

यदि आप steps फ़ंक्शन का उपयोग करते हैं, तो यह विघटित रूप से एनिमेट हो जाएगा। अधिक जानकारी के लिए MDN पर समय फ़ंक्शन दस्तावेज़ देखें। आपके मामले में, ऐसा करें:

-webkit-animation-timing-function: steps(1,end); 
animation-timing-function: steps(1,end); 

यह jsFiddle देखें।

मुझे यकीन है कि अगर यह मानक व्यवहार या तो है नहीं कर रहा हूँ, लेकिन जब आप कहते हैं कि आपको केवल एक कदम होगा, यह आप @keyframes खंड में आरंभ बिंदु बदल अनुमति देता है। इस तरह आप अपने प्रत्येक फ्रेम एनीमेशन को परिभाषित कर सकते हैं।

Answer 8

आप एनिमेटेड पृष्ठभूमि-स्थिति संपत्ति का उपयोग कर सकते हैं और छवि को स्प्राइट कर सकते हैं।

Answer 9

मुझे आपके जैसा ही काम करने की आवश्यकता है और आपके प्रश्न पर उतरा है। मैं here से पढ़े गए चरणों के बारे में जानने के लिए समाप्त हो गया।

JSFiddle of my solution in action

सबसे पहले मैं a sprite sheet that had two frames बनाया (ध्यान दें कि वर्तमान में Firefox में काम करता है, मैं तुम्हें, crossbrowser पंक्तियाँ जोड़ें समाधान अव्यवस्था का साफ रखने की कोशिश कर दूँगा)। तब मैंने div बनाया और पृष्ठभूमि के रूप में रखा, लेकिन मेरा div केवल मेरे sprite (100px) का आकार है।

<div id="cyclist"></div> 

#cyclist { 
    animation: cyclist 1s infinite steps(2); 
    display: block; 
    width: 100px; 
    height: 100px; 
    background-image: url('../images/cyclist-test.png'); 
    background-repeat: no-repeat; 
    background-position: top left; 
    } 

एनीमेशन 2 चरणों के लिए सेट है और पूरी प्रक्रिया 1 सेकंड लेती है।

@keyframes cyclist { 
    0% { 
    background-position: 0 0; 
    } 
    100% { 
    background-position: 0 -202px; //this should be cleaned up, my sprite sheet is 202px by accident, it should be 200px 
    } 
} 

Thiago above mentioned the steps function लेकिन मैंने सोचा कि मैं उस पर और अधिक विस्तृत था। बहुत सरल और भयानक सामान।

Answer 10

मुझे हाल ही में एक ही चीज़ करने की आवश्यकता है। यहाँ एक सरल कार्यान्वयन

#wrapper { width:100%; height:100%; position:relative; } 
 
#wrapper img { position:absolute; top:0; left:0; width:100%; height:auto; display:block; } 
 
#wrapper .top { animation:fadeOut 2s ease-in-out; animation-fill-mode:forwards; } 
 
@keyframes fadeOut { 
 
    0% { opacity:1; } 
 
    100% { opacity:0; } 
 
}

<div id="wrapper"> 
 
    <img src="img1.jpg" class="top" style="z-index:2;"> 
 
    <img src="img2.jpg" style="z-index:1;"> 
 
</div>

मेरे लिए

Answer 11

काम करता है। संक्रमण के लिए पृष्ठभूमि-छवि के उपयोग पर ध्यान दें।

#poster-img { 
    background-repeat: no-repeat; 
    background-position: center; 
    position: absolute; 
    overflow: hidden; 
    -webkit-transition: background-image 1s ease-in-out; 
    transition: background-image 1s ease-in-out; 
}