Hỗ trợ Webkit cho chuyển tiếp gradient

Question

Tôi tự hỏi liệu có ai biết khi nào webkit hỗ trợ chuyển tiếp của gradient không?
ví dụ, việc mã doesnt sau trong Chrome 6 (giả sử grad-chuyển tiếp là một liên kết):

.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

Đang cố gắng để làm điều tương tự.

Kể từ bây giờ, tôi không nghĩ rằng có thể tạo hiệu ứng cho một gradient.

Tôi đang sử dụng giải pháp thay thế. Thay vì tạo hiệu ứng gradient, tôi sử dụng gradient bán trong suốt cho hình nền và sau đó làm động màu nền.

#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; 
} 

tôi cũng đưa ra một số ví dụ ở đây: http://tylergaw.com/www/lab/css-gradient-transition-sorta/

Answer 2

Có thể làm cho một sự chuyển tiếp trên gradient sử dụng một ít hack:

Mã dưới đây sẽ thiết lập độ trong suốt đến 0,3 vào màu đen tối nhất . Di chuột sẽ đặt màu này thành màu khác. Kể từ khi transparancy có thể được chuyển đổi nó sẽ tạo ra hiệu ứng tương tự.

Tôi cũng đã thêm phiên bản chuyển tiếp cho mozilla và IE.

.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

Tôi đã hỏi câu hỏi này một lúc trước, bạn có thể thấy câu trả lời tôi nhận được bằng cách tìm kiếm thông qua các câu hỏi của tôi. Họ nói với tôi rằng bạn không thể làm điều này đúng cách, nhưng bạn có thể làm điều đó bằng cách thiết lập gradient trên hai div khác nhau, sau đó fading một div trên đầu trang của người khác để tạo ra hiệu ứng.

Answer 4

Bạn cũng có thể sử dụng background-position để tạo ra ảo tưởng rằng gradient đang thay đổi, trong khi thực tế thực tế nó chỉ đơn giản là được chuyển: http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

Answer 5

tôi đang làm việc trên JS lib mà làm cho một sự chuyển tiếp cho gradient thể : Nó đã có thể được sử dụng cho các gradient tuyến tính. Cách sử dụng:

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