generate keyframe css for 'rotating' letters

demo.md

http://codepen.io/gitgrimbo/pen/RoJJmq

index.js

(function(numLetters) {
	var numSteps = (numLetters-1) * 4;
	var numKeyframes = (numLetters-1) * 2;
	var step = 100 / numSteps;
    var arr = [];
    for (var i = 0; i < numKeyframes; i++) {
        var translate = 0;
        if (i !== 0) {
            translate = (i < numKeyframes/2) ?
                i * (100 / numLetters) :
                (numKeyframes - i) * (100 / numLetters);
        }

        var start = (i*2) * step;
        var end = (i*2 + 1) * step;
        var keyframes = `${start.toFixed(1)}%, ${end.toFixed(1)}%`;
        if (i === 0) {
            keyframes += ", 100%";
        }

        arr.push(`${keyframes} {transform:translateY(-${translate.toFixed(1)}%);}`);
    }
    return [
        "@keyframes change {",
        arr.join("\n"),
        "}"
    ].join("\n");
}(5))

sample-results.css

@keyframes change {
0.0%, 6.3%, 100% {transform:translateY(-0.0%);}
12.5%, 18.8% {transform:translateY(-20.0%);}
25.0%, 31.3% {transform:translateY(-40.0%);}
37.5%, 43.8% {transform:translateY(-60.0%);}
50.0%, 56.3% {transform:translateY(-80.0%);}
62.5%, 68.8% {transform:translateY(-60.0%);}
75.0%, 81.3% {transform:translateY(-40.0%);}
87.5%, 93.8% {transform:translateY(-20.0%);}
}