test.html

<script src="node_modules/capsid/dist/capsid.js"></script>
<script src="multiflip.js"></script>
<script>
capsid.def('multiflip', multiflip)

setTimeout(function () {
  var demo = function (mf) {
    mf.show().then(function () {
      setTimeout(function () {
        mf.hide().then(function () { demo(mf) })
      }, 300)
    })
  }

  Array.prototype.forEach.call(document.querySelectorAll('.multiflip'), function (el) {
    demo(capsid.get('multiflip', el))
  });
}, 400);

</script>

<style>
.multiflip {
    color: white;
    transition-duration: 500ms;
    text-align: center;
    margin: auto;
    position: relative;
    width: 400px;
    height: 200px;
    margin-bottom: 15px;
    display: inline-block;
}

.multiflip .content {
    position: relative;
    line-height: 200px;
    font-size: 3em;
    opacity: 0;
}
  body {
    background-color: #999;
  }
</style>

<div class="multiflip" m="8" n="4" unit-dur="400" bgcolor="#115588"><div class="content">Example</div></div>
<div class="multiflip" m="8" n="4" unit-dur="800" bgcolor="#885511"><div class="content">Example</div></div>
<div class="multiflip" m="16" n="8" unit-dur="3200" bgcolor="#881155"><div class="content">Example</div></div>
<div class="multiflip" m="16" n="8" unit-dur="6400" bgcolor="#111111"><div class="content">Example</div></div>
<div class="multiflip" m="16" n="8" unit-dur="6400" bgcolor="#111111"><div class="content">Example</div></div>
<div class="multiflip" m="16" n="8" unit-dur="6400" bgcolor="#111111"><div class="content">Example</div></div>
<div class="multiflip" m="8" n="8" unit-dur="6400" bgcolor="#111111"><div class="content">Example</div></div>
<div class="multiflip" m="8" n="8" unit-dur="6400" bgcolor="#111111"><div class="content">Example</div></div>
<div class="multiflip" m="8" n="8" unit-dur="6400" bgcolor="#111111"><div class="content">Example</div></div>