Skip to main content

Simple Animation

A simple CSS animation library with JavaScript helpers that can be used to enhance certain animations.

The goal of this library is to provide common animations used in larger applications.

Installation

npm install @simple-web-utilities/simple-animation

Getting Started

This library contains CSS animations and JavaScript helpers. Check out the getting started section for each below.

This library also contains utility classes and CSS variables that can be used to customize the animations.

CSS Variables

The following CSS variables are available to customize the animations.

VariableDescriptionDefault
--simple-animation-durationThe duration the animation. This will affect the duration utility classes.1s
--simple-animation-delayThe delay before the animation starts. This will affect the delay utility classes.1s
--simple-animation-repeatHow many times to repeat an animation. This will affect the repeat utility classes.1
--simple-animation-collapse-max-heightThe max height of an element to use for any expanding/collapsing animations.1000px