Несколько .CSS Jquery линии

Question

Я совершенно новой для JQuery, но удалось сделать некоторые эффекты дизайнер хотел, посмотрите на эту скрипку:

jsFiddle

Так что я хотел бы слова, чтобы прийти на передний план, измените цвет и затухайте обратно на задний план и снова измените цвет.

Метод .animate, который я использую сейчас, не очень гладкий, я искал stackoverflow и не нашел хорошего решения, однако нашел причину, по которой он не работает: что-то с рендерингом и совместимостью с браузером. Детали можно найти here

Я прочитал что-то о методе jquery .css и начал пробовать это. Намного более плавный переход. Единственная проблема заключается в том, что я не могу показаться, чтобы объединить несколько стилей, так что они будут анимированы один за другим, как я мог бы сделать с .animate способом: как показано в jfiddle выше

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"}); 

Кто-нибудь есть решение для этого?

заранее спасибо

Answer 1

Есть WebKit переход на конец события и т.д., но для того, что вы делаете, когда у вас уже есть длительность, простой Тайм-аут, кажется, проще:

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

JavaScript

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

Fiddler View