用Jquery一个接一个地链接两个css效果

Question

>我尝试链接两个css过渡效果

适用于动画：

$('.txt').css({'transition': 'transform .5s ease-in-out ', 
'transform': 'translate(30px, 30px)'}).delay(500)
.animate({fontSize:'2em'},0).delay(500)
.animate({height:100},0);

http://jsfiddle.net/vx2kpmo5/105/

我真正想要的是无法正常工作，为什么？

$('.txt').css({'transition': 'transform .5s ease-in-out ', 
'transform': 'translate(30px, 30px)'}).delay(2000)
.css({'transition': 'transform 1.5s ease-in',
'transform': 'scale(1.1, 1.1)', 'transform-origin': 'top left'});

http://jsfiddle.net/vx2kpmo5/103/

另外，如何为每个.txt类一个接一个地跳动这些动画，而不是与上面的例子相同？

问候

Answer 1

.delay()仅适用于jQuery动画。在第二个示例中放弃它，改为添加 transition-delay 属性。

$('.txt').css({
  'transition': 'transform .5s ease-in-out, font-size 1.5s ease-in 2s',
  'transform': 'translate(30px, 30px)',
  'font-size': '1.1rem',
  'transform-origin': 'center center, top left'
});

http://jsfiddle.net/4vy9vua9/

如果您确实需要使用transform而不是font-size来获得缩放效果，则需要使用 CSS 关键帧重写内容。