Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
css-animation
Advanced tools
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.
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');
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 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 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.
make css animation easier
npm install
npm start
http://localhost:9001/examples/
online example: http://yiminghe.github.io/css-animation/
var anim = require('css-animation');
anim(el,animationName,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 |
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
css-animation is released under the MIT license.
FAQs
css-animation
The npm package css-animation receives a total of 367,030 weekly downloads. As such, css-animation popularity was classified as popular.
We found that css-animation demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.