Press F12 and have fun!

The keyframes library can be accessed via K global variable.
The shape ids are #shape-1, #shape-2, #shape-3 and so on.

...or just play around with examples below...

Roll

var moveRight = K.chainEvenly( K.ensureProperty('marginLeft', "0px"), K.ensureProperty('marginLeft', "100px"), K.ensureProperty('marginLeft', "200px"), K.ensureProperty('marginLeft', "300px") ); var ensureTransformOrigin = K.ensureProperty("transform-origin", "100% 100%"); var rotate90deg = K.transition('transform', 'rotateZ(0deg)', 'rotateZ(90deg)'); var rotate90degEased = K.easings.easeInOutExpo(rotate90deg) var rotate90deg4times = K.repeat(4, rotate90degEased); var roll = K.merge(ensureTransformOrigin, rotate90deg4times, moveRight); var rollAndWaitABit = K.linger(.90, roll); var rollRightThenBack = K.toAndFrom(rollAndWaitABit); K.stream(4000, K.prerender(4000, rollRightThenBack), K.intoDom(document.getElementById('shape-1')))

Hide/show

var hide = K.tween({ transform: "scale(1) rotate(0deg)", opacity: 1 }, { transform: "scale(0.1) rotate(90deg)", opacity: 0 }); var hideAndLinger = K.linger(.25, hide); var hideThenShow = K.toAndFrom(hideAndLinger); K.stream(2000, K.easings.easeInOutExpo(hideThenShow), K.intoDom(document.getElementById('shape-2')));

Stress test

var NR_RECTS = 500; var markup = ""; for(var counter=0; counter<NR_RECTS; counter++){ markup += '<div class="rect" style=""></div>'; } document.getElementById('shape-3').innerHTML = markup; var rects = document.querySelectorAll("#shape-3 div"); var rotate = K.transition('transform', 'rotateZ(0deg)', 'rotateZ(360deg)'); var prerenderedRotate = K.prerender(500, rotate); K.infiniteStream(500, rotate, function(state){ Object.keys(rects).forEach(function(index){ if('length' == index) return; var rect = rects[index]; Object.keys(state).forEach(function(property){ rect.style[property] = state[property]; }) }) })

Rendering to CSS

var animation =K.toAndFrom( K.easings.easeInExpo( K.transition('transform', 'translateY(0px)', 'translateY(150px') ) ) var keyframes = K.toCss('from-keyframes-js-with-love', 60, animation); var css = "#shape-4{animation: from-keyframes-js-with-love 1s infinite}\n" + keyframes; cssEditor.getSession().setValue( css ); document.getElementById('style-1').innerHTML = css;