CSS 그래디언트 애니메이션

Question

CSS3 그래디언트가있는 버튼 (앵커)이 있습니다.
사용자가 버튼 위로 마우스를 가져 가면 그라디언트를 한 색상으로 애니메이션/페이드하고 싶습니다.
문제는 jQuery UI 애니메이션이 그라디언트가 아닌 일반 색상에서만 작동하므로이 작업을 수행하는 방법을 찾을 수 없다는 것입니다.
아이디어가 있으십니까?
감사합니다.

Answer 1

모든 브라우저에서 지원되지는 않지만 CSS3 애니메이션을 사용할 수 있습니다. 이 페이지에는 배경색을 변경하는 예제가 있지만 분명히 그라디언트를 추가해야합니다.

http://css3.bradshawenterprises.com/animations/

Answer 2

나는 그것을 지원하는 브라우저에 대한 CSS3 그라디언트를 애니메이션에 대한 jQuery를 플러그인을 작성했습니다.

당신은 here

그것은 내가 사용하기 쉽게하기 위해 CSS3 그라디언트를 정규화 쓴 그라데이션 cssHook 사용하실 수 있습니다.

당신은 그것을 좋아 사용합니다 :

는

$("#elem").animateGradient('linear-gradient(red, blue)', 1000); 

그것은 그래서 당신은 다른 애니메이션에 추가 할 수 있습니다 $.queue 및 $.dequeue/next()를 사용합니다.

이 기능을 사용하려면 먼저 그래디언트가 설정되어 있어야합니다.

애니메이션의 문제는 일반적으로 jQuery가 CSS 속성 값 (예 : 숫자가 아닌)에 값을 지정한다는 것입니다.

Answer 3

Backgroundor이라는 jquery 라이브러리를 확인하고 직접 작성했습니다.

매우 간단하기 만하면 $('#divId').backgroundor();을 입력하면 효과가 있으며 옵션도 충분합니다. 확인하십시오 :

// the values here are the default values 
options = { 
    opacityval : 0; // int, only 1 or 0 are accepted now (can be boolean too) 
    intervaltime : 100; // int, interval time value 
    values  : [0,51,75]; // array of int, default percentage values for the linear gradient colors 
    colors  : ['#499bea','#207ce5','#1679e3']; // array of string (hex values), default colors for the linear gradient 
    color   : '#000000'; // string (hex value), default color for opacity animation 
    animspeed  : 'linear'; // string, default animation curve 
    animdegree : '90deg'; // string, default linear-gradient degree 
}