css-animation

What is css-animation?

The css-animation npm package provides utilities for handling CSS animations and transitions in JavaScript. It simplifies the process of adding, removing, and managing CSS animations and transitions programmatically.

What are css-animation's main functionalities?

Add CSS Animation

This feature allows you to add a CSS animation to an element. The 'fade-in' animation is applied to the element, and a callback function is executed once the animation is complete.

const cssAnimation = require('css-animation');

cssAnimation.addAnimation(element, 'fade-in', () => {
  console.log('Animation complete');
});

Remove CSS Animation

This feature allows you to remove a CSS animation from an element. The 'fade-in' animation is removed from the element.

const cssAnimation = require('css-animation');

cssAnimation.removeAnimation(element, 'fade-in');

Add CSS Transition

This feature allows you to add a CSS transition to an element. The 'width 2s' transition is applied to the element, and a callback function is executed once the transition is complete.

const cssAnimation = require('css-animation');

cssAnimation.addTransition(element, 'width 2s', () => {
  console.log('Transition complete');
});

Remove CSS Transition

This feature allows you to remove a CSS transition from an element. The 'width 2s' transition is removed from the element.

const cssAnimation = require('css-animation');

cssAnimation.removeTransition(element, 'width 2s');

Other packages similar to css-animation

animate.css

animate.css is a popular library that provides a collection of ready-to-use, cross-browser animations for use in your web projects. Unlike css-animation, which focuses on programmatically managing animations and transitions, animate.css provides predefined CSS classes for animations.

velocity-animate

velocity-animate is a fast and feature-rich JavaScript library for animating DOM elements. It offers more control and performance optimizations compared to css-animation, and it supports both CSS and JavaScript animations.

animejs

animejs is a lightweight JavaScript animation library with a simple, yet powerful API. It allows for complex animations and supports various animation types, including CSS properties, SVG, and DOM attributes. It provides more advanced animation capabilities compared to css-animation.

README

css-animation

make css animation easier

Development

npm install
npm start

Example

http://localhost:6006/

online example: http://yiminghe.github.io/css-animation/

Feature

• support ie8,ie8+,chrome,firefox,safari

install

Usage

import anim from 'css-animation';
anim(el,animationName,function(){});

API

void anim(el:DOMElement, animationName:String, callback:Function)

name	type	default	description
el	DOMElement		dom element to be animated
animationName	String|Object		will add animationName (if string) or animationName.name (if object) as class to el, then setTimeout 0 to add ${animationName}-active (if string) or animationName.active (if object) to el
callback	Function		triggered when anim caused by animationName is done

License

css-animation is released under the MIT license.