tiny bit of javascript enabling CSS-defined animations with fallback for older browsers
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
index.html
trun.js
trun.min.js

README.md

transitionrunner

It's always a choice between a bloated JavaScript animation library that works in every browser or CSS animations that are not avaliable in some older browsers.

This is a tiny JavaScript tool to enable you to define keyframes in CSS and make it run with JavaScript. You get a simple and powerful CSS animation feature on new browsers that falls back to runing only the keyframes in a browser with no transition support.

Simplest demo: http://naugtur.github.io/transitionrunner/

usage:

  • simple animation

animates through keyframes defined in CSS (3 frames by default)

js

 animate(element,'myAnimationClass');

css

 .myAnimationClass[data-kframe=1] { top: 40% !important; }
 .myAnimationClass[data-kframe=2] { top: 42% !important; }
 .myAnimationClass[data-kframe=3] { top: 44% !important; }
  • other options

js

 animate(element,'myAnimationClass',{
     steps:10, //number of steps
     delay:2000, //wait this long before each run 
     duration:300 //frame duration 
     repeat: 5 //how many runs of animation
     });
  • run animation again

js

 var anim_runner = animate(element,'myAnimation');
 //... later
 anim_runner.run({ //can run it again with new settings
     steps:10, //number of steps
     delay:2000, //wait this long before run
     duration:300 //frame duration 
     repeat: 5 //how many runs of animation
     })
  • stop animation while it's going

js

 var anim_runner = animate(element,'myAnimation');
 //... later
 anim_runner.stop();   

easing

Transitionrunner's settings allow to set duration as a number, so the animation loop is linear. But easing is about speed, not time.

If v = s/t and t is constant, then you can create easing by changing the distance.

Annotated CSS from the demo:

.shake { top: 50px; } /*initial*/
.shake[data-kframe="1"]{ top: 30px !important; } /*20px move*/
.shake[data-kframe="2"]{ top: 20px !important; } /*10px move*/
.shake[data-kframe="3"]{ top: 30px !important; } /*10px move back*/
.shake[data-kframe="4"]{ top: 50px !important; } /*20px move back*/
.shake[data-kframe="5"]{ top: 70px !important; } /*20px move*/
.shake[data-kframe="6"]{ top: 80px !important; } /*10px move*/
.shake[data-kframe="7"]{ top: 70px !important; } /*10px move back*/
/*and 20px back to default*/