여러 .CSS JQuery와 라인

Question

나는 JQuery와 아주 새로운 해요,하지만, 설계자가 원하는 어떤 영향을이 바이올린을 살펴보고 관리 :

jsFiddle

그래서 내가 와서 말을하고 싶습니다 앞면에 색상을 변경하고 배경으로 희미 해지고 색상을 다시 변경합니다. 렌더링 및 브라우저 호환성 뭔가 :

가

내가 지금 사용하고있어 .animate 방법은 정말 부드러운 아니라, I에 유래를 검색하고 더 좋은 해결책을 찾을 수 없습니다, 그러나 나는 그것이 작동하지 않는 이유를 발견했다. 세부 사항은

here 내가 JQuery와 .CSS 방법에 대해 뭔가를 읽고 그것을 밖으로 시도하기 시작 찾을 수 있습니다. 정말로 부드럽게 전환합니다. 유일한 문제는 그들이 다른 후 하나를 애니메이션 할 수 있도록 내가 .animate 방법으로 할 수 있기 때문에 내가 여러 가지 스타일을 결합 할 수없는 것이다 : 사람이 해상도를 가지고 있는가

var duration = 1400; 
$('.dgrey').css({"-webkit-transform":"scale(2)","-webkit-transition-timing-function":"ease-in", "-webkit-transition-duration": duration + "ms", "color":"#E5352D"}); 
$('.dgrey').css({"-webkit-transform":"scale(0.5)","-webkit-transition-timing-function":"ease-in", "-webkit-transition-duration": duration + "ms", "color":"#DDDDDD"}); 

위의 jfiddle 같이 이거? 사전에

감사

Answer 1

가 등 웹킷 전환 엔드 이벤트가 있지만 이미 시간이 어디 당신이 무슨 일을하는지에 대한 간단한 부드러운 전송 용 그런

var duration = 1400; 

function ani() { 
    $('.dgrey').css({'animation here'}); 
    setTimeout(function() { 
     $('.dgrey').css({next animation here}); 
     setTimeout(ani, duration); 
    }, duration); 
} 

ani(); 

FIDDLE

Answer 2

당신은 jQuery를 통과 플러그인을 사용하려고 할 수

: jQuery Transit

Answer 3

IWILL 할 뭔가 : 제한 시간은 쉽게 보인다 sition :

HTML

<div id="x" >TEXT TO ANIMATE</div> 

CSS

#x{ 
position:absolute; 
top: 100px; 
left: 200px; 
color: #0000FF; 
font-size: 40px; 
} 


@-webkit-keyframes pulse_animation { 
    50% { -webkit-transform: scale(2); } 
    100% { -webkit-transform: scale(0.5); } 
} 

자바 스크립트

var duration = 2800; 
$('#x').css({"-webkit-animation-duration": duration + "ms", "color":"#E5352D", "-webkit-animation-name": 'pulse_animation', "-webkit-animation-timing-function": "ease-in"});