css3一度すべてを表示すると繰り返すポップインとポップアウトアニメーション

Question

私はマップとして背景イメージを持っています。私は、上記の地図上で推薦状（絶対配置されたdivs）のリストを次々と表示して消滅させたい。すべてが表示されたら、それを繰り返す必要があります。

どのように私はcss3アニメーションを使用してこれを実装しますか？

Answer 1

CSS3アニメーションを使用し、それらを遅延させることで完全な要素アニメーションを作成し、JS setIntervalを使用してアニメーションを再開することができます。これはAdWords広告の一般的な使用方法です。

あらかじめ定義されたアニメーションを持つ良いライブラリはanimate.cssです。すべてのアニメーションが通過して完了した時間を計算し、そのアニメーションが完了するたびにクラスを削除して戻す間隔を設定する必要があります完成するアニメーション）。

Answer 2

私が使用したいトリックは、表示する各要素を反復し、長さの時間*要素インデックスでアニメーションをオフセットすることです。関数内でこれをラップし、time *要素配列の長さの後に呼び出すことができます。これは効果的にそれを永遠にループします。半秒のアニメーションに基づくいくつかの汎用コードは、次のようになります。

function runThrough() { 
     $('.your-elements').each(function(i,v) { 
      var current = $(this); 
      setTimeout(function() { 
       // do your animation e.g. $(current).fadeIn(500);    
      }, i * 500);   
     }); 
     setTimeout(runThrough(), $('.your-elements').length * 500); 
    }