Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
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.
1.4.0 / 2017-08-16
FAQs
css-animation
The npm package css-animation receives a total of 381,700 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.