/css-animator

As the name "css-animator" says it is an application to help you build your css animations way more easy.

Primary LanguageTypeScript

logo

CSS Animator

CSS Animator is a free application that simplifies the process of building CSS animations.

Click here to start building your animations!

Features

Timeline

The main goal of this application is to provide a timeline that resembles a video editor. The timeline represents the duration of your animation. It shows the progress of the animation as you play it. You can click and drag the timeline to move it to a specific point in the animation.

timeline

In the Timeline, you can also set the time of your animation by clicking on the time and inputting a time in milliseconds.

timeline

Keyframes

You can choose among a variety of properties to animate your element.

keyframes

The Keyframes allow you to create and edit your animation keyframes. You can add, remove, and modify keyframes by clicking on the corresponding buttons.

keyframes

Animation Encoding

This feature allows you to share your animations or view/edit anyone's animation.

animation encoded

Default Styles

This feature allows you to share your animations or view/edit anyone's animation.

default styles

Examples

In the Configs tab, you can view and edit three example animations.

examples
Made with ❤️