पृष्ठभूमि ढाल के साथ सीएसएस संक्रमण

Question

मैं CSS3 के साथ एनिमेशन/संक्रमण के बारे में सीख रहा हूं, लेकिन इस कोड में संक्रमण काम नहीं करता है ... क्यों?

HTML:

<div id="test"> 
</div> 

सीएसएस:

#test { 
    background-color: #333; 
    background-image: -webkit-linear-gradient(top, #333, #666); 
    width: 100px; 
    height: 100px; 
    -webkit-transition: background 1s linear; 
} 

#test:hover { 
    background-image: -webkit-linear-gradient(top, #666, #999); 
} 

http://jsfiddle.net/LLRfN/

Answer 1

यह मेरे लिए काम करता के रूप में यह इरादा चाहिए। कुछ बातें, यह केवल गूगल क्रोम में कार्य करेगा जब आप अन्य ब्राउज़रों में काम करना चाहते हैं:

Here is a generator

Here is an explanation

संपादित

क्षमा मुझे नहीं पता था वहाँ था वहां transition संपत्ति। कुछ googling करने और अपने आप पर कुछ सामान की कोशिश करने के बाद, यह स्पष्ट है कि पृष्ठभूमि ग्रेडियेंट्स पर संक्रमण संभव नहीं है ... अभी तक।

यहाँ कैसे यह एक हैक

http://nimbupani.com/some-css-transition-hacks.html

Answer 2

अपने मुझ पर ठीक काम कर रहा का एक छोटा सा के साथ काम करने के लिए पर एक अच्छा लेख है। क्या आपने सीएसएस फ़ाइल को टैग के साथ लपेट लिया है?

<style> 
#test { 
background-color: #333; 
background-image: -webkit-linear-gradient(top, #333, #666); 
width: 100px; 
height: 100px; 
-webkit-transition: background 1s linear; 
} 

#test:hover { 
background-image: -webkit-linear-gradient(top, #666, #999); 
} 
</style> 
<div id="test"> 
</div> 

Answer 3

यह मेरे लिए काम किया, इसके अलावा, मैं जहां मक्खी

CSS3 Playground

Answer 4

ढाल संक्रमण "धोखा दे" का छोटा सा के साथ किया द्वारा कर सकते हैं पर यह जांच कर सकते हैं CSS3 के खेल का मैदान के लिए आप बात कर सकते हैं। मैं निश्चित रूप से सीएसएस सामान में समर्थक नहीं हूं (और मैं यहां नया हूं इसलिए मुझे तेजी से नफरत न करें: डी), लेकिन सिर्फ एक दूसरे के शीर्ष पर divs पर रखें, एक अस्पष्टता 1 और दूसरे के साथ 0. (प्रत्येक div के पास है) विभिन्न ग्रेडियेंट सेट करें) होवर पर, 1 से 0 तक अस्पष्टता बदलें और इसके विपरीत।

समय कार्य फ़ंक्शन सेट करें और हालांकि ये divs एक दूसरे जेड-इंडेक्स प्रॉपर्टी पर बाकी हैं। (सफारी के लिए अनुकूलित) हो सकता है रूकी तरीका है, लेकिन यह (आश्चर्यजनक) काम करता है पूरी तरह से:

#divgradient1 
    { 
    z-index:-1; 
    height:100px; 
    background: -webkit-linear-gradient(90deg, red, blue); 
    background: -o-linear-gradient(90deg, red, blue); 
    background: -moz-linear-gradient(90deg, red, blue); 
    background: linear-gradient(90deg, red, blue); 

    opacity:1; 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index ; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 

#divgradient1:hover{ 
    z-index:-1; 
    opacity:0;   
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 


#divgradient2:hover{ 
    opacity:1; 
    z-index:2; 
    background: -webkit-linear-gradient(-90deg, red, blue); 
    background: linear-gradient(-90deg, red, blue); 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 


#divgradient2 
    { 
    z-index:1; 
    opacity:0; 
    height:100px;   
    background: -webkit-linear-gradient(-90deg, red, blue); 
    background: linear-gradient(-90deg, red, blue); 
    transition:background,opacity,z-index; 
    -webkit-transition:background,opacity,z-index; 
    transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    } 

और जो कुछ भी यह करना चाहिए देखो की तरह divs:

<div id="divgradient1" style="position:absolute;width:100px;"></div> 
    <div id="divgradient2" style="position:absolute;width:100px;"></div> 

के लिए [वेबकिट समर्थन की