2012-12-10 2 views
0

전에는 쉽게 해본 적이 없으며 기존 코드로 가능한지 알아 내려고하고 있습니다. 나는 이미 css : hover를 가지고있다. 기존 코드에 fadein easing을 어떻게 사용합니까?fade EASING을 기존 코드/css와 함께 사용하는 방법은 무엇입니까? 가능한가?

#rbox a {height:48px; 
     line-height:48px; 
     padding-left:17px; 
     padding-right:17px; 
     float:left; 
     color:#FFF; 
     background:#c04747; 
     font-size:17px 
     } 

#rbox a:hover {background:#6C6C6C;} 



<div id="rbox"> <a href="mtf.com">Meet the Founder</a></div> 
+0

무엇을 !? css3 전환을 의미합니까? – elclanrs

+0

나는 생각한다. 내 호버가 전환 과정에서 쉽게되기를 바랍니다. 나는 나의 질문을 잘못 썼다고 생각한다. – Erik

답변

1

CSS3 완화에 대해주의해야 할 점은 오래된 브라우저는 아마도 지원하지 않는다는 것입니다. 이 경우 jQuery를 시도 할 수있다.

한편 여기 CSS3 easing 규칙을 생성하는 훌륭한 도구가 있습니다.

http://matthewlein.com/ceaser/

내가 제대로 이해하고있는 경우 귀하의 코드는 다음과 같을 수 있습니다 : 당신은 CSS3 전환을 의미하는 경우

#rbox a:hover 
{ 
    background:#6C6C6C; 
    -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -ms-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
    transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */ 
} 
0

이 수행해야합니다

#rbox a { 
    ... 
    transition: all .5s ease-in-out; 
} 

추가해야합니다 모든 브라우저를 지원하려는 경우 공급 업체 접두사.

관련 문제