animation-name命名需遵循字符规则、语义清晰、与@keyframes一致。1. 只能用字母、数字、连字符、下划线，不可数字开头或含空格特殊符号；2. 推荐kebab-case命名如fade-in；3. 名称须与@keyframes定义完全匹配，建议全小写；4. 多动画用逗号分隔，如slide-in, fade-in。
在 css 中，animation-name 用于指定 @keyframes 动画的名称，命名需要遵循一定的规范和最佳实践，以确保代码的可读性、兼容性和可维护性。
1. 命名字符规则
CSS 动画名称允许使用以下字符：
- 字母（a–z, A–Z）
- 数字（0–9）
- 连字符（-）和下划线（_）
- 转义字符或 Unicode 转义序列（如 2665 表示 ♥）
注意：不能以数字开头，也不能包含空格或特殊符号（如 !, @, #, $, % 等）。
错误示例：
animation-name: 1slide; /* 错误：以数字开头 */ animation-name: slide up; /* 错误：包含空格 */ animation-name: slide@key; /* 错误：包含非法字符 */
正确示例：
立即学习“前端免费学习笔记（深入）”；
animation-name: slide; animation-name: slide-up; animation-name: slide_up; animation-name: fade-in-anim; animation-name: _moveLeft;
2. 推荐命名风格
为了提高可读性和团队协作效率，建议采用语义化且一致的命名方式：
- 使用连字符分隔单词（kebab-case）：这是 CSS 社区广泛接受的命名约定。
- 语义清晰：名称应准确描述动画的行为，例如 fade-in、rotate-loop、bounce-out。
- 避免缩写歧义：如 anim1、a01 这类名称不利于后期维护。
3. 与 @keyframes 定义保持一致
animation-name 必须与 @keyframes 后面定义的名称完全匹配（包括大小写）：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation-name: fadeIn; /* 必须一致 */ }
注意：CSS 是大小写敏感的（在部分环境下），建议统一使用小写字母命名，避免问题。
4. 多个动画名称的写法
可以同时指定多个动画，用逗号分隔：
animation-name: slide-in, fade-in, rotate;
对应也需要定义多个 @keyframes 规则。
基本上就这些。命名不复杂但容易忽略细节，保持规范能让项目更清晰。