Multiple .CSS Jquery lines

Question

我对jquery很陌生，但成功地实现了设计师想要的一些效果，看看这个小提琴：

jsFiddle

所以我希望这些单词出现在前面，改变颜色，淡出背景，再次改变颜色。

我现在使用的.animate方法不是很流畅，我搜索了stackoverflow，没有找到好的解决方案，但我找到了它不起作用的原因：渲染和浏览器兼容性。详细信息可以在这里找到

我读了一些关于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 transit插件：jQuery transit

Answer 3

为了平稳过渡，我会这样做：

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