https://github.com/naugtur/transitionrunner

tiny bit of javascript enabling CSS-defined animations with fallback for older browsers
https://github.com/naugtur/transitionrunner

Last synced: about 1 month ago
JSON representation

tiny bit of javascript enabling CSS-defined animations with fallback for older browsers

• Host: GitHub
• URL: https://github.com/naugtur/transitionrunner
• Owner: naugtur
• Created: 2013-04-27T08:58:23.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2013-05-24T16:14:10.000Z (over 12 years ago)
• Last Synced: 2025-04-09T13:27:18.379Z (6 months ago)
• Language: JavaScript
• Homepage:
• Size: 145 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
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*/