チェーン2つのCSS効果のjQuery

Question

と次々私はチェーン2つの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のクラスのために次々とこれらのアニメーションをしませティガーする方法

$('.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/

プラス、？

よろしく

Answer 1

.delay()のみjQueryのアニメーションで動作します。 2番目の例でそれを削除し、代わりに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.