能，@keyframes 中可同时声明多个可动画CSS属性，如transform、opacity等；不可动画属性如display则无效；多属性动画需避免冲突、单位不匹配，并优先使用transform+opacity组合以提升性能。
keyframes 里能同时写多个 CSS 属性吗？
能，而且这是 @keyframes 的标准用法。只要属性在动画触发时支持 CSS 动画（即有可动画化值），就可以在同一个 from/to 或百分比节点里一并声明。
常见可动画属性包括：transform、opacity、color、background-color、left/top（需配合 position）、width/height 等。但像 display、z-index、font-family 这类不可插值的属性，即使写进去也不会产生过渡效果，浏览器会直接跳变或忽略。
多个属性一起动，为什么有些没效果？
最常踩的坑是属性冲突或单位不匹配。比如：
-
transform: translateX(100px)和left: 100px同时设 —— 它们视觉位移可能重叠，但动画曲线、性能、层级行为完全不同； -
color: #fff和background-color: rgba(0,0,0,0.5)混用时，如果起始/结束的透明度或色彩空间差异大，人眼容易察觉卡顿； - 用
em或rem写font-size动画，但父元素字体大小在动画期间被 JS 修改，会导致计算中断或突变。
建议优先用 transform + opacity 组合：它们触发硬件加速、不触发重排、兼容性好，且浏览器优化最成熟。
立即学习“前端免费学习笔记（深入）”；
如何让不同属性按不同节奏变化？
不能靠单个 animation 属性实现——它对整个 keyframes 是统一计时函数。真要差异化节奏，得拆成多个独立动画：
- 给同一个元素加多个
animation声明，用逗号分隔； - 每个动画绑定不同的
@keyframes名，各自定义自己的animation-timing-function、animation-duration； - 确保关键帧名不重复，且各动画的
animation-fill-mode协调（比如都设forwards防止回退）。
@keyframes slide {
to { transform: translateX(200px); }
}
@keyframes fade {
to { opacity: 0.3; }
}
.element {
animation: slide 0.6s ease-out, fade 1.2s cubic-bezier(0.2, 0.8, 0.4, 1);
}
移动端上多个属性动画卡顿怎么办？
核心问题通常是触发了 Layout（重排）。以下操作会显著增加开销：
- 同时动画
width+height+border—— 浏览器每帧都要重新计算盒模型； - 用
top/left移动绝对定位元素，且父容器有overflow: hidden—— 可能导致频繁裁剪重绘； - 在
@keyframes中写大量box-shadow或filter（尤其模糊值动态变化）。
优化方向很明确：把位移交给 transform: translate()，透明度交给 opacity，其他视觉变化尽量静态化或用 will-change: transform, opacity 提前提示浏览器。iOS Safari 对非合成属性动画尤其敏感，这点不能妥协。
复杂动画不是堆属性，而是判断哪些必须动、哪些可以省、哪些该用 JS 控制节奏——keyframes 是工具，不是万能胶。
