Question

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

适用于animate：

$('.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 keyframes.重写内容

用Jquery连锁两个css效果

1 个答案: