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