Skip to main content

How you can create CSS3 animations without writing code

Want to use CSS3 animation but haven't mastered the code yet? Or perhaps you spend a lot of time coding animations and would like to speed things up.

Bounce.js (opens in new tab) provides a neat way to create and refine your animations by entering parameters into a table. First you select the type of animation from a list of commonly-used effects, then tweak its appearance by changing values and dragging sliders to produce whatever you need. The animation is previewed live, so it's really quick to see the effect of your changes.

Once you're happy, export the CSS to insert the animation into your project. There's also a handy feature that enables you to share what you've created with others via a short URL.

Bounce.js is free to use. Go here (opens in new tab) to try it out.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Tanya is a writer covering art, design, and visual effects. She has 16 years of experience as a magazine journalist and has written for numerous publications including 3D World, 3D Artist, ImagineFX, Computer Arts, net magazine, and Creative Bloq. For Creative Bloq, she mostly writes about web design, including the hottest new tools, as well as 3D artwork and VFX.