An editor for CSS animations using an Graph and some buttons/sliders.

• Graph - Vidualize easing curves with an interactive Graph
• Preview - An animated Ball matching to the Graph/Curve
• Adjustable Duration - The Animation is controlable from 500ms to 3000ms
• Code export - For every Easing, there is according CSS Code

Open the GitHub Page

or

1. Clone the Project
2. Open index.html in your browser

List of all animations/transitions

Linear

Sine
Ease in Sinee
Ease Out Sinee
Ease In Out Sinee

Quad
Ease In Quadd
Ease Out Quadd
Ease In Out Quadd

Cubic
Ease In Cubicc
Ease Out Cubicc
Ease In Out Cubicc

Back
Ease in Backk
Ease Out Backk
Ease In Out Backk

Bounce
Ease Out Bouncee

project is made with HTML, CSS and JavaScript

I hope you like this project. For me this is a fun way to learn cureves and cube-bezier in CSS :)

Created with ❤️