能，但需拆分为多个独立动画并行触发而非叠加；若同时修改transform等属性，后声明的会覆盖前一个；推荐在单个@keyframes中用复合transform实现同步效果。
多个@keyframes能同时用吗
能，但不是直接“叠加”在同一个animation属性里——CSS不支持在一个animation声明中写多个@keyframes名称。你得把它们拆成独立的动画层，靠多个animation值并行触发。
常见错误是这样写：animation: slide 1s, rotate 1s;——语法合法，但浏览器会把它当作一个动画列表，每个都作用于同一元素，彼此不干扰，也不合成新效果。它不是“融合”，而是“并行播放”。
- 每个
animation值控制一套独立的属性变化（比如transform、opacity、color），只要不冲突就能共存 - 如果两个动画都改
transform，后声明的会覆盖前一个（CSS层叠规则生效） - 想让位移+旋转真正同步，必须确保它们时长、延时、方向、填充模式一致，否则节奏错开就显得“卡”或“飘”
animation多值写法的实际限制
多个动画可以写在同一行：animation: move 2s ease-in, fade 1.5s linear 0.5s both;，但要注意这些细节：
- 每个动画的参数必须完整对应：不能漏掉
duration或timing-function，否则整条声明可能被忽略 - 顺序很重要：后写的动画在
transform这类可叠加属性上会覆盖先写的（例如rotate(10deg)和translateX(20px)可以共存，但两个rotate()会互相顶掉） - 不支持“动画A结束再播动画B”的链式写法——那是
animationend事件或animation-delay配合时长算出来的，不是语法原生能力
用transform合并位移/缩放/旋转更可靠
比起硬塞多个animation去动不同transform子属性，直接在单个@keyframes里写复合transform更稳、性能更好，也避免覆盖问题。
立即学习“前端免费学习笔记（深入）”；
5种风格css鼠标悬停图片显示文字信息
下载
这是一组鼠标悬停特效，含5种不同风格的css鼠标悬停图片显示文字信息，每种风格包含2-3个款式，款款经典美观，适合任何团队、产品、个人作品等的展示，是非常不错的悬停展示方法。
比如想同时移动+旋转+缩放，别拆三个动画，写一个：
@keyframes compound {
from {
transform: translateX(0) rotate(0) scale(1);
}
to {
transform: translateX(100px) rotate(360deg) scale(1.2);
}
}
原因很实在：
- 浏览器对单次
transform计算优化成熟，多个transform动画并行反而触发多次重排重绘 - 所有变换统一受同一个时间函数控制，节奏不会漂移
- 不用操心
animation-fill-mode在多个动画间是否一致
真要组合不同节奏的动画？得靠JS或分层DOM
纯CSS做不到“这个动画快播完时，那个才开始加速”，除非手动算好animation-delay和duration匹配。稍微复杂点的协同，就得换思路：
- 把需要不同节奏的视觉部分拆到不同DOM节点，各自加动画（比如
<div class="icon"><span class="pulse"></span></div>，脉冲和图标旋转分开控） - 用
requestAnimationFrame或animationend事件驱动下一段CSS动画，适合有明确触发条件的场景 - 复杂交互动画建议用
Web Animations API（element.animate()），它支持时间线控制、暂停、逆向，比纯CSS灵活得多
最常被忽略的一点：动画组合不是堆得越多越酷，而是看浏览器能不能每帧稳定跑满60fps。两个高开销动画并行，可能比一个复合动画还卡。动手前先打开DevTools的Rendering面板看看实际帧率。
