jQueryで動的に表示した後にCSSアニメーションを同期させます

Question

一部のボックス要素は表示されています。ボタンをクリックすると、すべてのボックス要素が表示されます。背景はアニメーション化されています。残念ながら、アニメーションはjQueryで表示した後のbeginnから始まります。

何とか同期する方法はありますか？ここで

は一例です：

.box:nth-child(n+3) { 
    display: none; 
} 
.box { 
    display: block; 
    width: 200px; 
    height: 50px; 
    background: linear-gradient(337deg, rgba(31,212,166,1), rgba(24,54,141,1), rgba(102,24,141,1)); 
    background-size: 400% 400%; 
    animation: AnimationName 4s ease infinite; 
    margin-bottom: 5px; 
} 

のjQuery：

$('button').on('click', function(){ 
    $('.box:nth-child(n+3)').css('display', 'block') 
}) 

https://jsfiddle.net/boLgvcc8/

Answer 1

あなたが0PXする第三の要素の高さを設定し、その後に、あなたはそれを設定することができますクリックすることができます.css（ 'height'、 '50px'）で50に戻ります。