Universal Animation Library

✨ 特性

- 🎨 105+ 动画效果 - 从基础到终极的完整动画库
- 🚀 7 个版本系列 - V1 基础到 V7 终极的渐进式学习路径
- 💪 零依赖 - 纯 CSS 实现，即插即用
- 📱 响应式设计 - 适配各种屏幕尺寸
- 🎯 易于使用 - 简洁的 API，只需添加 class
- 🔧 高度可定制 - 支持自定义时长、缓动函数等
- 🌐 浏览器兼容 - 支持 Chrome 87+、Firefox 78+、Safari 14+、Edge 88+
- 📦 模块化导入 - 可按需导入特定版本

📦 安装

``bash
npm install universal-animation-library
`

或使用其他包管理器：

`bash
yarn add universal-animation-library
pnpm add universal-animation-library
`

🚀 快速开始

$3

`css
@import 'universal-animation-library';
`

$3

`css
/ V1 基础系列 (18 动画) /
@import 'universal-animation-library/dist/v1.css';

/ V2 超级动画 (15 动画) /
@import 'universal-animation-library/dist/v2.css';

/ V3 超现实动画 (14 动画) /
@import 'universal-animation-library/dist/v3.css';

/ V4 创意互动 (18 动画) /
@import 'universal-animation-library/dist/v4.css';

/ V5 极限突破 (10 动画) /
@import 'universal-animation-library/dist/v5.css';

/ V6 传奇动画 (12 动画) /
@import 'universal-animation-library/dist/v6.css';

/ V7 终极动画 (16 动画) /
@import 'universal-animation-library/dist/v7.css';
`

$3

`css
@import 'universal-animation-library/dist/index.lite.css';
`

💻 使用示例

$3

`html



`html


`html



`css
.ua-v1-animated {
--ua-v1-duration: 1.5s;
}

.ua-v7-liquidIn {
--ua-v7-duration-in: 2s;
}
`

$3

`css
.ua-v1-animated {
--ua-v1-ease-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.ua-v7-liquidIn {
--ua-v7-ease-physics: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
`

📋 可用动画列表

$3

淡入淡出: fadeIn, fadeOut, fadeInDown, fadeOutDown, fadeInUp, fadeOutUp, fadeInLeft, fadeOutLeft, fadeInRight, fadeOutRight

缩放: zoomIn, zoomOut

旋转: rotateIn, rotateOut

弹跳: bounceIn, bounceOut

其他: flash, shake, pulse

$3

hologram, vortexIn, sineWave, origami, orbitIn, kaleidoscope, nebulaExplosion, transformer, tidalWave, magicTransform, dnaHelix, quantumLeap, flameBurst, aurora, blackHole

$3

wormhole, hologramPro, quantumEntanglement, neuralNetwork, metaverse, vrImmersive, warpDrive, cyberpunk, galaxyVortex, nftReveal, astralProjection, timeTravel, crystalBall, bigBang

$3

magnetPull, floatIn, waveIn, elasticPop, focusIn, drawIn, rotateIn, prismIn, scalePulse, gradientFadeIn, linkIn, flipIn, driftOut, shrinkOut, spiralOut, explodeOut, disintegrateOut

$3

extremeVortex, morphingKaleidoscope, auroraPhantom, glassShatter, dimensionTransit, liquidMorph, particleReassemble, spiralTime, pixelCollapse, interstellar

$3

lightShadow, spaceFold, crystalFission, electromagneticStorm, quantumRipples, dimensionGate, auroraSpectrum, stardustAssembly, rainbowFission, lightningPulse, singularityExplosion, deepSpace

$3

- 液态: liquidIn, liquidOut
- 晶体: crystalIn, crystalOut
- 涡流: vortexIn, vortexOut
- 光芒: rayIn, rayOut
- 分形: fractalIn, fractalOut
- 彩虹: rainbowIn, rainbowOut
- 弹跳: bounceIn, bounceOut
- 波纹: rippleIn, rippleOut

🌐 浏览器支持

| Chrome | Firefox | Safari | Edge |
|--------|---------|--------|------|
| >= 87 | >= 78 | >= 14 | >= 88 |

📦 包大小

- index.css (完整版): ~330 KB
- index.lite.css (轻量版): ~30 KB
- v1.css: ~30 KB
- v2.css: ~50 KB
- v3.css: ~45 KB
- v4.css: ~60 KB
- v5.css: ~40 KB
- v6.css: ~50 KB
- v7.css`: ~55 KB

🔗 相关链接

- 在线演示
- 使用文档
- GitHub 仓库
- 问题反馈

📝 许可证

MIT License

🤝 贡献

欢迎贡献！请查看 贡献指南 了解详情。

---