<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    @-webkit-keyframes animation1 {
      0% { -webkit-transform: translateX(0px); }
      50% { -webkit-transform: translateX(100px); }
      100% { -webkit-transform: translateX(0px); }
    }

    @-webkit-keyframes animation2 {
      0% { -webkit-transform: rotate(0deg); }
      50% { -webkit-transform: rotate(180deg); }
      100% { -webkit-transform: rotate(0deg); }
    }

    @-webkit-keyframes animation3 {
      0% { -webkit-transform: scale(1); }
      50% { -webkit-transform: scale(3); }
      100% { -webkit-transform: scale(1); }
    }

    @-webkit-keyframes animation4 {
      0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
      50% { -webkit-transform: matrix(-1, 0, 0, -1, 0, 0); }
      100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
    }

    @-webkit-keyframes animation5 {
      0% { -webkit-transform: translateX(0px) scale(8); opacity(1); }
      50% { -webkit-transform: translateX(100px) scale(0); opacity(0); }
      100% { -webkit-transform: translateX(0px) scale(8); opacity(1); }
    }

    @-webkit-keyframes animation6 {
      0% { -webkit-transform: rotate(0deg); opacity(1); }
      50% { -webkit-transform: rotate(180deg); opacity(0); }
      100% { -webkit-transform: rotate(0deg); opacity(1); }
    }

    @-webkit-keyframes animation7 {
      0% { -webkit-transform: scale(1); opacity(1); }
      50% { -webkit-transform: scale(13); opacity(0); }
      100% { -webkit-transform: scale(1); opacity(1); }
    }

    @-webkit-keyframes animation8 {
      0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
      50% { -webkit-transform: matrix(-.5, .5, -.5, -1.2, -150, 100); opacity(0); }
      100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); }
    }

    @-webkit-keyframes animation9 {
      0% { -webkit-transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
      50% { -webkit-transform: translateX(100px) rotate3d(0, 1, 0, 45deg); }
      100% { -webkit-transform: translateX(0px) rotate3d(0, 1, 0, 0deg); }
    }

    @-webkit-keyframes animation10 {
      0% { -webkit-transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
      50% { -webkit-transform: rotate(180deg) rotate3d(0, 1, 0, 45deg); }
      100% { -webkit-transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); }
    }

    @-webkit-keyframes animation11 {
      0% { -webkit-transform: scale(1) rotate3d(0, 1, 0, 0deg); }
      50% { -webkit-transform: scale(3) rotate3d(0, 1, 0, 45deg); }
      100% { -webkit-transform: scale(1) rotate3d(0, 1, 0, 0deg); }
    }

    @-webkit-keyframes animation12 {
      0% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
      50% { -webkit-transform: matrix(-1, .5, .2, -1, 100, 100) rotate3d(0, 1, 0, 45deg); }
      100% { -webkit-transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); }
    }

    @-webkit-keyframes animation13 {
      0% { -webkit-transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }
      50% { -webkit-transform: translateX(100px) rotate3d(1, 1, 1, 45deg) scale(-10); opacity(0); }
      100% { -webkit-transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); }
    }

    @-webkit-keyframes animation14 {
      0% { -webkit-transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); }
      50% { -webkit-transform: rotate(180deg) rotate3d(1, 1, 1, 45deg) translateZ(500px); opacity(0); }
      100% { -webkit-transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); }
    }

/*  @-webkit-keyframes animation15 {                                                                   */
/*    0% { -webkit-transform: translateZ(0px) rotate3d(1, 1, 1, 0deg) rotate(0deg); opacity(1); }      */
/*    50% { -webkit-transform: translateZ(500px) rotate3d(1, 1, 1, 45deg) rotate(180deg); opacity(0); }*/
/*    100% { -webkit-transform: translateZ(0px) rotate3d(1, 1, 1, 0deg) rotate(0deg); opacity(1); }    */
/*  }                                                                                                  */

    @-webkit-keyframes animation15 {
      0% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
      50% { -webkit-transform: scale(3) rotate3d(1, 1, 1, 45deg); opacity(0); }
      100% { -webkit-transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); }
    }

    @-webkit-keyframes animation16 {
      0% { -webkit-transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); }
      50% { -webkit-transform: matrix(-1, 0, 0, 0, 0, 0) rotate3d(1, 1, 1, 45deg); opacity(0); }
      100% { -webkit-transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); }
    }

    div {
      position: absolute;
      -webkit-transform-style: preserve-3d;
    }

    .poster {
      height: 50px;
      width: 50px;
      background-color: gray;
      -webkit-border-radius: 10px;
      font-family: 'Georgia', serif;
      border: 2px solid black;
      font-size: 42px;
      font-weight: bold;
      text-align: center;
    }
  </style>
  <script type="text/javascript">
    function startExperiment()
    {
      for (var i = 0; i < 16; ++i) {
        var elem = document.getElementById("elem" + i.toString());
        elem.style.left = (i % 4 * 25 + 5).toString() + "%";
        elem.style.top = (Math.floor(i / 4) * 25 + 5).toString() + "%";
        elem.style.webkitAnimationName = "animation" + (i + 1).toString();
        elem.style.webkitAnimationDuration = "2s";
        elem.style.webkitAnimationIterationCount = "infinite";
      }
    }

    window.addEventListener('load', startExperiment, false);
  </script>
</head>
<body>
<div id="elem0"><p class="poster">?</p></div>
<div id="elem1"><p class="poster">?</p></div>
<div id="elem2"><p class="poster">?</p></div>
<div id="elem3"><p class="poster">?</p></div>
<div id="elem4"><p class="poster">?</p></div>
<div id="elem5"><p class="poster">?</p></div>
<div id="elem6"><p class="poster">?</p></div>
<div id="elem7"><p class="poster">?</p></div>
<div id="elem8"><p class="poster">?</p></div>
<div id="elem9"><p class="poster">?</p></div>
<div id="elem10"><p class="poster">?</p></div>
<div id="elem11"><p class="poster">?</p></div>
<div id="elem12"><p class="poster">?</p></div>
<div id="elem13"><p class="poster">?</p></div>
<div id="elem14"><p class="poster">?</p></div>
<div id="elem15"><p class="poster">?</p></div>
</body>
</html>