animation-name用于指定@keyframes定义的动画名称，需名称完全匹配才能生效，如@keyframes slideIn{}对应.animation-name:slideIn，可简写为animation:slideIn 1s ease-out；多个动画用逗号分隔，参数按顺序对应，注意大小写和拼写一致。
在CSS中，animation-name 属性用于指定要应用的动画名称。这个名称必须与使用 @keyframes 定义的动画名称匹配，才能让动画生效。
使用 @keyframes 创建一个动画，并为其命名，比如叫做 slideIn：
@keyframes slideIn {将上面定义的动画名赋给某个元素的 animation-name 属性：
.box {或者使用简写属性 animation 更简洁：
立即学习“前端免费学习笔记（深入）”；
.box {如果想同时运行多个动画，可以用逗号分隔多个动画名：
@keyframes fadeIn {每个动画的其他参数（如时长、延迟等）也要按顺序对应填写。
基本上就这些。只要确保 animation-name 和 @keyframes 的名字完全一致，动画就能正确执行。大小写和拼写都要注意，否则动画不会生效。
以上就是在css中如何用animation-name指定动画的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
954
收藏
