@ant-design/css-animation

What is @ant-design/css-animation?

@ant-design/css-animation is a utility library for handling CSS animations in JavaScript. It provides a simple API to start, stop, and manage CSS animations, making it easier to integrate animations into your web applications.

What are @ant-design/css-animation's main functionalities?

Start Animation

This feature allows you to start a CSS animation on a specified element. The 'fade-in' class is applied to the element, and a callback function is executed once the animation starts.

const cssAnimation = require('@ant-design/css-animation');

const element = document.getElementById('myElement');
cssAnimation(element, 'fade-in', () => {
  console.log('Animation started');
});

Stop Animation

This feature allows you to stop a CSS animation on a specified element. The animation is halted immediately, and any ongoing animation effects are removed.

const cssAnimation = require('@ant-design/css-animation');

const element = document.getElementById('myElement');
cssAnimation.stop(element);
console.log('Animation stopped');

Event Listener for Animation End

This feature allows you to add an event listener that triggers a callback function when the CSS animation ends. This is useful for performing actions after the animation completes.

const cssAnimation = require('@ant-design/css-animation');

const element = document.getElementById('myElement');
cssAnimation(element, 'fade-in', () => {
  console.log('Animation started');
  cssAnimation.addEndListener(element, () => {
    console.log('Animation ended');
  });
});

Other packages similar to @ant-design/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 @ant-design/css-animation, which focuses on managing animations programmatically, animate.css provides pre-defined CSS classes that you can apply directly to your elements.

animejs

animejs is a lightweight JavaScript animation library with a simple yet powerful API. It allows you to animate CSS properties, SVG, DOM attributes, and JavaScript objects. Compared to @ant-design/css-animation, animejs offers more flexibility and control over animations, including complex sequences and timelines.

README

css-animation

make css animation easier

Development

npm install
npm start

Example

http://localhost:9001/examples/

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

Feature

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

install

Usage

var anim = require('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

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

css-animation is released under the MIT license.