animation-name用于指定@keyframes定义的动画名称，需名称完全匹配才能生效，如@keyframes slideIn{}对应.animation-name:slideIn，可简写为animation:slideIn 1s ease-out；多个动画用逗号分隔，参数按顺序对应，注意大小写和拼写一致。
在CSS中，animation-name 属性用于指定要应用的动画名称。这个名称必须与使用 @keyframes 定义的动画名称匹配，才能让动画生效。
定义动画关键帧
使用 @keyframes 创建一个动画，并为其命名，比如叫做 slideIn：
@keyframes slideIn {from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
在元素上使用 animation-name
将上面定义的动画名赋给某个元素的 animation-name 属性：
.box {animation-name: slideIn;
animation-duration: 1s;
animation-timing-function: ease-out;
}
或者使用简写属性 animation 更简洁：
立即学习“前端免费学习笔记（深入）”；
.box {
animation: slideIn 1s ease-out;
}
多个动画同时使用
如果想同时运行多个动画，可以用逗号分隔多个动画名：
@keyframes fadeIn {from { opacity: 0; }
to { opacity: 1; }
} .box {
animation-name: slideIn, fadeIn;
animation-duration: 1s, 2s;
animation-fill-mode: both, both;
}
每个动画的其他参数（如时长、延迟等）也要按顺序对应填写。
基本上就这些。只要确保 animation-name 和 @keyframes 的名字完全一致，动画就能正确执行。大小写和拼写都要注意，否则动画不会生效。
