字
字节笔记本
2026年2月19日
AnimatiSS：精美的 CSS 动画库
API中转
¥120
本文介绍 AnimatiSS，一个精心整理的 CSS 动画库，提供 100+ 种即用型动画效果，帮助开发者快速为 Web 项目添加生动的动画。
AnimatiSS 简介
AnimatiSS 是由 Frank Eno (@xsgames_) 开发的 CSS 动画集合网站，提供了一系列精美、多彩的 CSS 动画效果，专为 Web 项目设计。该库包含 100 多种不同类型的动画，涵盖缩放、旋转、滑动、阴影、模糊等多种效果。
核心定位：A nice, colorful collection of CSS animations for your awesome web projects
动画分类
AnimatiSS 将动画分为 10 大类别，共 100+ 种动画效果：
1. Scale Up（放大动画）- 15 种
从中心或特定方向放大的动画效果：
scale-up-center- 中心放大scale-up-top,scale-up-bottom- 上下方向放大scale-up-left,scale-up-right- 左右方向放大scale-up-tl,scale-up-tr,scale-up-bl,scale-up-br- 对角方向放大scale-up-ver-*,scale-up-hor-*- 垂直/水平轴向放大
2. Scale Down（缩小动画）- 15 种
与 Scale Up 相对应的缩小动画，效果镜像对称。
3. Rotate（旋转动画）- 18 种
2D 和 3D 旋转效果：
rotate-90,rotate-180,rotate-360- 固定角度旋转rotate-tl-*,rotate-tr-*,rotate-bl-*,rotate-br-*- 不同原点旋转rotate-diagonal-*- 对角线 3D 旋转（使用rotate3d()）
4. Rotate & Scale（旋转+缩放）- 10 种
组合动画，同时进行旋转和缩放：
rotate-scale-up-*- 旋转并放大rotate-scale-down-*- 旋转并缩小
5. Swing（摆动动画）- 8 种
类似铰链的摆动效果，元素像门一样摆动。
6. Slide（滑动动画）- 12 种
方向性平移动画：
slide-top,slide-bottom- 上下滑动slide-left,slide-right- 左右滑动slide-rotate-*- 滑动同时旋转
7. Shadow（阴影动画）- 24 种
投影和光晕效果：
drop-shadow-*- 外部阴影inset-shadow-*- 内阴影pop-shadow-*- 弹出阴影效果
8. Tracking In/Out（文字间距动画）- 7 种
文字字间距动画：
tracking-in-expand- 字间距展开tracking-in-contract- 字间距收缩- 适合标题和文字展示效果
9. Blur（模糊动画）- 5 种
基于滤镜的模糊效果：
blur-in,blur-out- 模糊淡入淡出- 使用 CSS
filter: blur()实现
10. Special（特殊效果）- 18 种
趣味物理效果：
shake-*- 抖动效果bounce-*- 弹跳效果jello-*- 果冻效果wobble-*- 摇摆效果vibrate-*- 振动效果flicker-*- 闪烁效果
使用方法
在线使用
- 访问网站：https://xsgames.co/animatiss
- 浏览分类：点击 "STYLES" 按钮查看动画分类
- 预览效果：点击播放按钮 (▶) 预览动画，可自定义持续时间
- 复制代码：点击复制按钮获取压缩后的 CSS 代码
代码示例
css
/* 中心放大动画 */
.scale-up-center {
animation: scale-up-center .4s;
}
@keyframes scale-up-center {
0% { transform: scale(.5) }
100% { transform: scale(1) }
}自定义持续时间
默认动画持续时间为 .4s，可以根据需要调整：
css
/* 更快的动画 */
.scale-up-center {
animation: scale-up-center .2s;
}
/* 更慢的动画 */
.scale-up-center {
animation: scale-up-center .8s;
}技术特点
- 纯 CSS 实现：使用
@keyframes定义动画，无需 JavaScript - 轻量级：代码经过压缩，体积小巧
- 高性能：使用
transform和opacity属性，触发 GPU 加速 - 易于集成：直接复制 CSS 代码即可使用
- 响应式：动画效果在各种设备上表现一致
3D 动画效果
AnimatiSS 提供多种 3D 动画：
css
/* 对角线 3D 旋转 */
.rotate-diagonal-1 {
animation: rotate-diagonal-1 .4s linear both;
}
@keyframes rotate-diagonal-1 {
0% { transform: rotate3d(1, 1, 0, 0deg) }
50% { transform: rotate3d(1, 1, 0, -180deg) }
100% { transform: rotate3d(1, 1, 0, -360deg) }
}文字特效示例
css
/* 字间距展开效果 */
.tracking-in-expand {
animation: tracking-in-expand .4s cubic-bezier(.215, .61, .355, 1) both;
}
@keyframes tracking-in-expand {
0% {
letter-spacing: -.5em;
opacity: 0;
}
40% { opacity: .6 }
100% {
letter-spacing: normal;
opacity: 1;
}
}物理效果示例
css
/* 果冻效果 */
.jello-horizontal {
animation: jello-horizontal .9s both;
}
@keyframes jello-horizontal {
0%, 100% { transform: scale3d(1, 1, 1) }
30% { transform: scale3d(1.25, .75, 1) }
40% { transform: scale3d(.75, 1.25, 1) }
50% { transform: scale3d(1.15, .85, 1) }
65% { transform: scale3d(.95, 1.05, 1) }
75% { transform: scale3d(1.05, .95, 1) }
}适用场景
网页交互
- 按钮点击反馈
- 卡片悬停效果
- 页面过渡动画
内容展示
- 图片画廊切换
- 文字标题入场
- 数据可视化动画
游戏开发
- UI 元素动效
- 角色状态反馈
- 道具获得动画
营销页面
- 产品展示动画
- 滚动触发动画
- 加载状态指示
许可证
AnimatiSS 采用 FreeBSD License 开源许可证，可自由用于个人和商业项目。
网站信息
- 官方网址：https://xsgames.co/animatiss
- 作者：Frank Eno (@xsgames_)
- 技术栈：纯 CSS + localStorage（记住用户选择的分类）
总结
AnimatiSS 是一个实用且易用的 CSS 动画库，其优势包括：
- 分类清晰：10 大类 100+ 动画，便于查找
- 即拿即用：在线预览、一键复制代码
- 纯 CSS：无需 JavaScript，性能优秀
- 可定制：支持调整动画持续时间
- 免费开源：FreeBSD 许可证，商业友好
对于需要快速为项目添加动画效果的开发者来说，AnimatiSS 是一个高效的工具，无需从头编写复杂的 CSS 动画代码。
分享: