{"_id":"@danilidonbeltran/simple-css-animations","_rev":"6-ebe21e50220015628ee2c046e62fd37d","name":"@danilidonbeltran/simple-css-animations","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"@danilidonbeltran/simple-css-animations","version":"1.0.1","keywords":["css","animation"],"author":{"name":"Daniel J.L. Beltran"},"license":"ISC","_id":"@danilidonbeltran/simple-css-animations@1.0.1","maintainers":[{"name":"danilidonbeltran","email":"danilidonbeltran@gmail.com"}],"homepage":"https://github.com/dani-beltran/simple-css-animations#readme","bugs":{"url":"https://github.com/dani-beltran/simple-css-animations/issues"},"dist":{"shasum":"795deb028203f8d04ccb8095be9c82ba68085f86","tarball":"https://registry.npmjs.org/@danilidonbeltran/simple-css-animations/-/simple-css-animations-1.0.1.tgz","fileCount":7,"integrity":"sha512-g4fpkcz6Lwl8OPMCdl1ag5ZBwii3wAq9P4e77XsHPt8MLGbWGbgw9xTsPn2n/BJpoS98TGvHV3Se1SuxYsbtZA==","signatures":[{"sig":"MEQCIGoh0uDpaFJokQqkOGzOU8ElqbNsjAxV3YltIqoqQxdmAiBY5pmha914UozGCLNqvRGAAzBsO63YtJBuaI+bzc9hYA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25471},"main":"dist/style.css","gitHead":"0a4f99df2f7e22d0732419e4bc580ed9a89d4b2d","scripts":{"dev":"sass src/index.scss dist/style.css --watch","test":"echo \"Error: no test specified\" && exit 1","build":"sass src/index.scss dist/style.css --style=compressed","prepublishOnly":"npm run build"},"_npmUser":{"name":"danilidonbeltran","email":"danilidonbeltran@gmail.com"},"repository":{"url":"git+https://github.com/dani-beltran/simple-css-animations.git","type":"git"},"_npmVersion":"10.9.2","description":"Some simple CSS animations","directories":{},"_nodeVersion":"22.17.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.90.0"},"_npmOperationalInternal":{"tmp":"tmp/simple-css-animations_1.0.1_1755602750250_0.39864549053443055","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@danilidonbeltran/simple-css-animations","version":"1.0.2","keywords":["css","animation"],"author":{"name":"Daniel J.L. Beltran"},"license":"ISC","_id":"@danilidonbeltran/simple-css-animations@1.0.2","maintainers":[{"name":"danilidonbeltran","email":"danilidonbeltran@gmail.com"}],"homepage":"https://github.com/dani-beltran/simple-css-animations#readme","bugs":{"url":"https://github.com/dani-beltran/simple-css-animations/issues"},"dist":{"shasum":"2304a71477c7e464aec2dbae9a8d018bfc3aa8f1","tarball":"https://registry.npmjs.org/@danilidonbeltran/simple-css-animations/-/simple-css-animations-1.0.2.tgz","fileCount":7,"integrity":"sha512-3ssTdpy/34INas+dO30R8yxJ39I9eMOZdU+cU1O4362P2ADFG1bFtieIEmMT8jJ1/wZhzLyeMLfT995TCLoOMw==","signatures":[{"sig":"MEUCIQCc3Bw5/NQCMoQ8tGvmzECyMdRL6k0yaW2r1u+ZzzZxJgIgCmRhZQJehhvytaMKTgcGBQ8/aw3d7YGk9a+lsakvcVU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":25471},"main":"dist/style.css","gitHead":"991a1e6ee7da92f80c4f368defa5c57138018983","scripts":{"dev":"sass src/index.scss dist/style.css --watch","test":"echo \"Error: no test specified\" && exit 1","build":"sass src/index.scss dist/style.css --style=compressed","prepublishOnly":"npm run build"},"_npmUser":{"name":"danilidonbeltran","email":"danilidonbeltran@gmail.com"},"repository":{"url":"git+https://github.com/dani-beltran/simple-css-animations.git","type":"git"},"_npmVersion":"10.9.2","description":"Some simple CSS animations","directories":{},"_nodeVersion":"22.17.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"sass":"^1.90.0"},"_npmOperationalInternal":{"tmp":"tmp/simple-css-animations_1.0.2_1755603817878_0.9291178382535537","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@danilidonbeltran/simple-css-animations","version":"1.0.3","description":"Some simple CSS animations","main":"dist/style.css","scripts":{"build":"sass src/index.scss dist/style.css --style=compressed","dev":"sass src/index.scss dist/style.css --watch","prepublishOnly":"npm run build","test":"echo \"Error: no test specified\" && exit 1"},"keywords":["css","animation"],"repository":{"type":"git","url":"git+https://github.com/dani-beltran/simple-css-animations.git"},"author":{"name":"Daniel J.L. Beltran"},"license":"ISC","publishConfig":{"access":"public"},"devDependencies":{"sass":"^1.90.0"},"_id":"@danilidonbeltran/simple-css-animations@1.0.3","gitHead":"e53766fb23cf7c5d021df34cc0bedfb3c8121bb3","bugs":{"url":"https://github.com/dani-beltran/simple-css-animations/issues"},"homepage":"https://github.com/dani-beltran/simple-css-animations#readme","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-lBHqKn22mahi6YBorndweND7ErHHPsHKbx9hXBAGL+FsLP+sUXapLzNzaxsXP1x3cmeC0Xylk9myVd9ocLVlQw==","shasum":"5383b50fd8dbcf452178bd275fb665ed1e5924de","tarball":"https://registry.npmjs.org/@danilidonbeltran/simple-css-animations/-/simple-css-animations-1.0.3.tgz","fileCount":7,"unpackedSize":25506,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGmf6H1YCfHJuzNc/z4kszV9BzRaZds6Gtz8gGhYkxH9AiAoFpGkpOoNmQZYd1G5W5zfRK2F647J/l4WkPJHDHv9Uw=="}]},"_npmUser":{"name":"danilidonbeltran","email":"danilidonbeltran@gmail.com"},"directories":{},"maintainers":[{"name":"danilidonbeltran","email":"danilidonbeltran@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/simple-css-animations_1.0.3_1761231907052_0.47894271752215367"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-19T11:25:50.037Z","modified":"2025-10-23T15:05:07.444Z","1.0.0":"2025-08-18T09:49:13.369Z","1.0.1":"2025-08-19T11:25:50.514Z","1.0.2":"2025-08-19T11:43:38.063Z","1.0.3":"2025-10-23T15:05:07.255Z"},"bugs":{"url":"https://github.com/dani-beltran/simple-css-animations/issues"},"author":{"name":"Daniel J.L. Beltran"},"license":"ISC","homepage":"https://github.com/dani-beltran/simple-css-animations#readme","keywords":["css","animation"],"repository":{"type":"git","url":"git+https://github.com/dani-beltran/simple-css-animations.git"},"description":"Some simple CSS animations","maintainers":[{"name":"danilidonbeltran","email":"danilidonbeltran@gmail.com"}],"readme":"# Simple CSS Animations\n\nA lightweight collection of simple, performant CSS animations for modern web applications. This library provides a comprehensive set of keyframe animations using modern CSS properties like `translate`, `scale`, and `rotate` for optimal performance.\n\nBuilt with SCSS and compiled to a single, optimized CSS file for easy integration.\n\n## Installation\n\n```bash\nnpm install @danilidonbeltran/simple-css-animations\n```\n\n## Usage\n\n### Import the compiled CSS library\n```css\n@import url(\"@danilidonbeltran/simple-css-animations\");\n```\n\nOr in your HTML:\n```html\n<link rel=\"stylesheet\" href=\"node_modules/@danilidonbeltran/simple-css-animations/dist/index.css\">\n```\n\n### Using with build tools\nIf you're using a bundler like Webpack, Vite, or similar:\n```javascript\nimport '@danilidonbeltran/simple-css-animations';\n```\n\n### Apply animations to elements\n```css\n.animated-element {\n  animation: bounce-in 1s ease-out;\n}\n\n.fade-element {\n  animation: fade-in 0.5s ease-in-out;\n}\n```\n\n## Development\n\nThis project uses SCSS for development and compiles to a single CSS file for distribution.\n\n### Build Process\n```bash\n# Install dependencies\nnpm install\n\n# Build the CSS from SCSS sources\nnpm run build\n\n# Watch for changes during development\nnpm run dev\n```\n\n### Project Structure\n```\nsrc/\n├── index.scss           # Main entry point\n├── show-animations.scss # Entrance animations\n└── hide-animations.scss # Exit animations\ndist/\n└── index.css           # Compiled CSS (ready for production)\n```\n\n## Available Animations\n\n### Show/Entrance Animations\n\n#### Bounce Animations\n- `bounce` - Simple bouncing effect\n- `bounce-in` - Bouncing entrance with scale\n- `bounce-in-left` - Bounce in from the left\n- `bounce-in-right` - Bounce in from the right\n- `bounce-in-up` - Bounce in from above\n- `bounce-in-down` - Bounce in from below\n\n#### Fade Animations\n- `fade-in` - Simple fade in\n- `fade-in-up` - Fade in while moving up\n- `fade-in-down` - Fade in while moving down\n- `fade-in-left` - Fade in while moving from left\n- `fade-in-right` - Fade in while moving from right\n\n#### Slide Animations\n- `slide-in` - Generic slide in\n- `slide-in-right` - Slide in from the right\n- `slide-in-left` - Slide in from the left\n- `slide-in-top` - Slide in from the top\n- `slide-in-bottom` - Slide in from the bottom\n\n#### Zoom Animations\n- `zoom-in` - Simple zoom in\n- `zoom-in-down` - Zoom in from above\n- `zoom-in-up` - Zoom in from below\n- `zoom-in-left` - Zoom in from the left\n- `zoom-in-right` - Zoom in from the right\n\n#### Roll Animations\n- `roll-in-right` - Roll in from the right\n- `roll-in-left` - Roll in from the left\n\n#### Rotation Animations\n- `rotate` - Simple rotation\n- `rotate-in` - Rotating entrance\n\n#### Special Effects\n- `flash` - Flashing effect\n- `flip` - Simple flip\n- `flip-in` - Flipping entrance\n- `heartbeat` - Heartbeat pulse effect\n- `jack-in-the-box` - Spring-like entrance\n- `light-speed-in` - High-speed entrance\n- `pulse` - Pulsing effect\n- `shake` - Shaking effect\n- `swing` - Swinging motion\n- `tada` - Celebration effect\n- `wobble` - Wobbling motion\n\n### Hide/Exit Animations\n\n#### Bounce Out Animations\n- `bounce-out` - Bouncing exit with scale\n- `bounce-out-left` - Bounce out to the left\n- `bounce-out-right` - Bounce out to the right\n- `bounce-out-up` - Bounce out upward\n- `bounce-out-down` - Bounce out downward\n\n#### Fade Out Animations\n- `fade-out` - Simple fade out\n- `fade-out-up` - Fade out while moving up\n- `fade-out-down` - Fade out while moving down\n- `fade-out-left` - Fade out while moving left\n- `fade-out-right` - Fade out while moving right\n\n#### Slide Out Animations\n- `slide-out` - Generic slide out\n- `slide-out-right` - Slide out to the right\n- `slide-out-left` - Slide out to the left\n- `slide-out-top` - Slide out to the top\n- `slide-out-bottom` - Slide out to the bottom\n\n#### Zoom Out Animations\n- `zoom-out` - Simple zoom out\n- `zoom-out-down` - Zoom out downward\n- `zoom-out-up` - Zoom out upward\n- `zoom-out-left` - Zoom out to the left\n- `zoom-out-right` - Zoom out to the right\n\n#### Roll Out Animations\n- `roll-out-right` - Roll out to the right\n- `roll-out-left` - Roll out to the left\n\n#### Other Exit Effects\n- `flip-out` - Flipping exit\n- `light-speed-out` - High-speed exit\n- `rotate-out` - Rotating exit\n\n## Examples\n\n### Basic Usage\n```html\n<div class=\"box\" style=\"animation: bounce-in 1s ease-out;\">\n  Hello World!\n</div>\n```\n\n### Chaining Animations\n```css\n.element {\n  animation: fade-in 0.5s ease-in-out;\n}\n\n.element.exit {\n  animation: fade-out 0.3s ease-in-out;\n}\n```\n\n### Custom Timing\n```css\n.slow-bounce {\n  animation: bounce-in 2s ease-out;\n}\n\n.fast-fade {\n  animation: fade-in 0.2s ease-in-out;\n}\n```\n\n### Animation with Delays\n```css\n.delayed-animation {\n  animation: slide-in-right 0.6s ease-out 0.3s both;\n}\n```\n\n## Browser Support\n\nThese animations use modern CSS properties and are optimized for performance:\n- Uses `translate`, `scale`, and `rotate` for hardware acceleration\n- Compatible with all modern browsers\n- Optimized for 60fps animations\n\n## Performance Notes\n\n- All animations use transform properties (`translate`, `scale`, `rotate`) which are GPU-accelerated\n- Avoid animating layout-affecting properties for best performance\n- Consider using `animation-fill-mode: both` to maintain start/end states\n\n## License\n\nISC License - see package.json for details.\n\n## Author\n\nDaniel J.L. Beltran\n\n## Repository\n\n[GitHub Repository](https://github.com/dani-beltran/simple-css-animations)","readmeFilename":"README.md"}