generate flip rotate animation keyframes

README.md

@keyframes flip-rotate-5-3-60 {
  0%, 1.5% { margin-top: 60px; }
  1.5%, 19.7% { margin-top: 0px; }
  22.7%, 39.4% { margin-top: -60px; }
  42.4%, 59.1% { margin-top: -120px; }
  62.1%, 78.8% { margin-top: -180px; }
  81.8%, 98.5% { margin-top: -240px; }
  100% { margin-top: -300px; }
}

flip-rotate.js

// copy this js to chrome console to execute and the generated css rule will be copied to your clipboard

function generate_flip_rotate(count, delay, height) {
  var gap = delay;
  var sum = 0;
  var igap = gap / 2;
  var step = (100 - igap) / count;
  var ret = [];
  ret.push('@keyframes flip-rotate-' + count + '-' + delay + '-' + height + ' {');
  ret.push('  0%, ' + (sum + igap) + '% { margin-top: ' + height * 1 + 'px; }');
  var i;
  for (i = 0; i < count; i++) {
    ret.push('  ' + +(sum + (i === 0 ? igap : gap)).toFixed(2) + '%, ' + +(sum + step).toFixed(2) + '% { margin-top: ' + height * i * -1 + 'px; }');
    sum += step;
  }
  ret.push('  100% { margin-top: ' + height * i * -1 + 'px; }');
  ret.push('}');
  return ret.join('\n');
}

copy(generate_flip_rotate(5, 3, 60));