<div class="animation-target">
</div>

  <h1>Bounce.js</h1>
  <p>This is a simple experiement using a library I just found...</p>
  <a href="http://bouncejs.com/">http://bouncejs.com/</a>
body {font-family:sans-serif;}

.animation-target {
  display:block;
  width:150px;
  min-height:150px;
  background:orange;
  margin:5em auto;
  padding:1em;
  
}



.animation-target {
  animation: animation 2000ms linear infinite both;
}

/* Generated with Bounce.js. Edit at https://goo.gl/Z3kBJC */

@keyframes animation { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.15% { transform: matrix3d(0.589, 0, 0, 0, 0, 1.514, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.3% { transform: matrix3d(0.297, 0, 0, 0, 0, 1.879, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.46% { transform: matrix3d(0.158, 0, 0, 0, 0, 2.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.61% { transform: matrix3d(0.125, 0, 0, 0, 0, 2.093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.16% { transform: matrix3d(0.183, 0, 0, 0, 0, 2.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  19.72% { transform: matrix3d(0.205, 0, 0, 0, 0, 1.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.9% { transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25% { transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  27.15% { transform: matrix3d(0.138, 0.145, 0, 0, -1.445, 1.382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.3% { transform: matrix3d(0.038, 0.196, 0, 0, -1.964, 0.379, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30.83% { transform: matrix3d(-0.006, 0.2, 0, 0, -2, -0.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.46% { transform: matrix3d(-0.016, 0.199, 0, 0, -1.994, -0.164, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.61% { transform: matrix3d(-0.029, 0.198, 0, 0, -1.979, -0.292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.16% { transform: matrix3d(-0.006, 0.2, 0, 0, -1.999, -0.065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.99% { transform: matrix3d(0, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.72% { transform: matrix3d(0.002, 0.2, 0, 0, -2, 0.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  49.9% { transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% { transform: matrix3d(0, 0.611, 0, 0, -1.486, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  54.3% { transform: matrix3d(0, 0.903, 0, 0, -1.121, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  55.83% { transform: matrix3d(-0.001, 1.015, 0, 0, -0.981, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.46% { transform: matrix3d(-0.001, 1.042, 0, 0, -0.948, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  58.61% { transform: matrix3d(0, 1.075, 0, 0, -0.907, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  64.16% { transform: matrix3d(0, 1.017, 0, 0, -0.979, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.99% { transform: matrix3d(0, 0.999, 0, 0, -1.001, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.72% { transform: matrix3d(0, 0.995, 0, 0, -1.006, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75% { transform: matrix3d(0, 0.999, 0, 0, -1.002, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80.83% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  91.99% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}



External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.