ढाल संक्रमण के लिए वेबकिट समर्थन

Question

मुझे आश्चर्य है कि क्या किसी को पता है कि ग्रेडिएंट के समर्थन संक्रमण कब करेंगे?
उदाहरण के लिए, क्रोम 6 में निम्नलिखित कोड काम नहीं करता है (यह मानते हुए स्नातक-संक्रमण के लिए एक कड़ी है):

.grad-transition { 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black)); 
    -webkit-transition: background-image .5s; 
} 
.grad-transition:hover { 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white)); 
} 

Answer 1

एक ही बात करने के लिए कोशिश कर रहा है।

अभी तक मुझे नहीं लगता कि ढाल को एनिमेट करना संभव है।

मैं एक कामकाज का उपयोग कर रहा हूँ। ढाल को एनिमेट करने के बजाय, मैं पृष्ठभूमि-छवि के लिए अर्ध-पारदर्शी ढाल का उपयोग कर रहा हूं और फिर पृष्ठभूमि रंग एनिमेट कर रहा हूं।

#button 
{ 
    background-color: #dbdbdb; 
    background-image: -webkit-gradient(linear, left top, left bottom, 
    color-stop(0%, rgba(255, 255, 255, 0.9)), 
    color-stop(100%, rgba(0, 0, 0, 0.6)) 
    ); 
} 

#button:hover 
{ 
    background-color: #353535; 
} 

मैं भी यहां कुछ उदाहरण प्रस्तुत: http://tylergaw.com/www/lab/css-gradient-transition-sorta/

Answer 2

यह थोड़ा हैक का उपयोग कर ढ़ाल पर एक संक्रमण बनाने के लिए संभव है:

नीचे कोड गहरे रंग वाले पर 0.3 करने के लिए पारदर्शिता सेट हो जाएगा । होवर इस रंग को दूसरे रंग में सेट करेगा। चूंकि ट्रांसपरेंसी को संक्रमण किया जा सकता है क्योंकि यह वही प्रभाव उत्पन्न करेगा।

मैंने मोज़िला और आईई के लिए संक्रमणकालीन संस्करण भी नहीं जोड़ा।

.menu li a { 
    background-color: #ffffff; 
    background: -webkit-gradient(linear, left top, right top, from(#eeeeee), to(rgba(238, 238, 238,0.3))); 

    background: linear-gradient(left,#eeeeee, #ffffff); 
    background: -moz-linear-gradient(180deg, #eeeeee, #ffffff); 
} 

.menu li a:hover { 
    background-color: #006613; 
    -webkit-transition-property: background-color, color; 
    -webkit-transition-duration: 0.3s; 
    -webkit-transition-timing-function: linear; 

    background: linear-gradient(left, #006613, #eeeeee); 
    background: -moz-linear-gradient(180deg, #006613, #eeeeee); 
} 

Answer 3

मैंने कुछ समय पहले इस प्रश्न से पूछा, आप मुझसे पूछे गए प्रश्नों के माध्यम से प्राप्त प्रतिक्रियाओं को देख सकते हैं। उन्होंने मुझे बताया कि आप अभी तक यह ठीक से नहीं कर सकते हैं, लेकिन आप इसे दो अलग-अलग divs पर ग्रेडियेंट सेट करके कर सकते हैं, फिर प्रभाव बनाने के लिए दूसरे के शीर्ष पर एक div को लुप्त कर सकते हैं।

Answer 4

तुम भी पृष्ठभूमि स्थिति का उपयोग कर सकते भ्रम है कि ढाल बदल रहा है, जब वास्तविक तथ्य यह बस में ले जाया जा रहा है देने के लिए: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Answer 5

मैं जे एस lib पर काम कर रहा हूँ जो संभव ढ़ाल के लिए एक संक्रमण बना देता है : यह पहले से ही रैखिक ग्रेडियेंट्स के लिए उपयोग किया जा सकता है। उपयोग:

var button = $('#button'); 
    var targetGradientString = 'linear-gradient(rgb(247, 91, 52) 0%, rgb(240, 233, 93) 25%, rgb(43, 245, 12) 50%, rgb(24, 85, 240) 75%, rgb(166, 39, 230) 100%)'; 
    var targetElement = $('#target'); 

    button.click(function() { 
     targetElement.gradientTransition(targetGradientString, 1500, 60); 
    }); 

github Demo