ReboundGen

Editable CSS3 animations calculated using Science

ReboundGen calculates springy CSS3 Keyframe animations based on a few simple parameters you define. It uses Facebook's Rebound.js for the math and outputs SCSS style sheets for each animation. So, you can import just the ones you need. A variety of nice animations can be accomplished using a small set of parameters.

Smooth animations, just a class away.

Use any of the provided animations, or build your own by modifying the data/data.json file.

Check it out on github

For Documentation, see here.

Examples:

.bounceInRight
.bounceInLeft
.bounceInDown
.bounceInDrop
.glideInRight
.glideInLeft
.glideInUp
.glideInDown
.bounceInScale
.bounceInScale2
.springScaleOut
.hoverJiggle
.hoverJiggle2
.twirlIn
.rubberband
.jellyfall
.jellyfall2
.slideInRight
.slideInLeft
.flipInLeft
.flipInRight
.flipInBottom
.flipInTop
.kitchenSink
.flyInBottom
.flyInLeft
.flyInRight