मैं css3 एनीमेशन के साथ पृष्ठभूमि स्थिति कैसे बदलूं?

Question

चलें कहते हैं कि मैं कैसे मैं स्थिति position: 100%; जैसे करने के लिए बदल जाएगा लेकिन हॉवर पर मुख्य-फ़्रेम के साथ

मैं मुख्य-फ़्रेम ठीक से उपयोग नहीं कर पा रहे position: 0%; में एक पृष्ठभूमि के साथ एक div तत्व है, यह काम करता है कभी नहीं और मैं सभी के लिए है नवीनतम ब्राउज़र।

धन्यवाद।

Answer 1

यदि आप होवर पर पृष्ठभूमि की स्थिति को एनिमेट करना चाहते हैं तो keyframe एनिमेशन के बजाय एक संक्रमण का उपयोग करना बहुत आसान है। उदाहरण के लिए यह पहेली देखें: http://jsfiddle.net/hfXSs/

यदि आप इसे एनीमेशन बनाने के अतिरिक्त प्रयास में रखना चाहते हैं तो आपको एवीआई-प्ले-स्टेट को div पर 'रुका हुआ' सेट करना होगा और इसे ' होवर पर चल रहा है। http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-

संपादित करें: यहाँ एनिमेशन रोक पर कल्पना देखें मैं तो यहाँ ऊब गया था एक ही बात-फ़्रेम एनिमेशन का उपयोग कर रहा है: http://jsfiddle.net/wGRg5/

जाहिर है, बेला समस्या यह है कि आप पर मँडरा नहीं कर रहे हैं जब है div एनीमेशन विराम जो शायद वांछित प्रभाव नहीं है।

Answer 2

कुछ कोड, इस समय केवल वेबकिट की तरह दिखता है।

.box { 
    display:block; 
    height:300px; 
    width:300px; 
    background:url('http://lorempixum.com/300/300') no-repeat; 
    background-position:-300px; 
    -webkit-transition:background-position 1s ease; 
} 

.box:hover{ 
    background-position:0px; 
} 

वाया: http://jsfiddle.net/hfXSs/

यहाँ अधिक: http://css-tricks.com/parallax-background-css3/