Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Bogdaan/e3f15a959bf12d90282b to your computer and use it in GitHub Desktop.
Save Bogdaan/e3f15a959bf12d90282b to your computer and use it in GitHub Desktop.
/**
* Generate keyframe for CSS3 animation
* ios bounce icon effect
* @size = bounce size (sample: 10)
* @onFrames = % time on frames (for delay or other effect 0-100) (sample: 50)
*/
function buildFrames(size, onFrames)
{
var source = ["0", "60", "83", "100", "114", "124", "128", "128", "124", "114", "100", "83", "60", "32", "0", "0", "18", "28", "32", "28", "18", "0"];
var multipler = [];
source.forEach(function(i){
multipler.push(i/128);
});
var sizes = [];
multipler.forEach(function(i){
sizes.push(i*size);
});
var timing = [];
var rate = 100/30;
var framerate = onFrames/30;
var result = [];
sizes.forEach(function(i, idx){
result.push((idx*framerate).toFixed(2)+"% { margin-top:-"+ i +"px; }");
});
result.forEach(function(i){ console.log(i) });
return result;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment