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 更简洁：
立即学习“前端免费学习笔记（深入）”；
稿定抠图
AI自动消除图片背景
76 查看详情 
.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 的名字完全一致，动画就能正确执行。大小写和拼写都要注意，否则动画不会生效。
以上就是在css中如何用animation-name指定动画的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1022923.html
微信扫一扫 
支付宝扫一扫 
