答案：CSS的@keyframes规则用于创建自定义动画，通过定义0%、50%、100%等关键帧控制样式变化，如slideIn实现元素从左滑入并淡入；可用from/to替代0%/100%简化语法，如fadeIn实现透明度过渡；通过animation属性将动画绑定到元素，可设置持续时间、速度曲线、延迟、次数和方向，支持简写形式；可通过添加中间帧实现复杂效果，如bounce弹跳动画；建议仅动画transform和opacity以提升性能，避免触发布局重排，并结合will-change优化渲染，移动端需控制动画强度以保证用户体验。
CSS 的 @keyframes 规则让你可以创建自定义动画，控制元素在动画过程中的样式变化。通过定义关键帧（如 0%、50%、100%），你可以精确控制动画每一阶段的表现。
定义 @keyframes 动画
使用 @keyframes 后跟一个自定义名称来创建动画，然后在花括号中设置不同时间点的CSS样式：
这个例子定义了一个从左滑入并淡入的动画。你也可以用 from 和 to 替代 0% 和 100%：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }将动画应用到元素
定义好动画后，使用 animation 属性将其绑定到元素上：
立即学习“前端免费学习笔记（深入）”；
或者使用简写形式：
.animated-box { animation: slideIn 1s ease-out 0.2s infinite alternate; }- animation-duration：动画持续时间
- animation-timing-function：速度曲线，如 ease、linear、cubic-bezier()
- animation-delay：延迟开始时间
- animation-iteration-count：播放次数，可设为数字或 infinite
- animation-direction：播放方向，normal、reverse、alternate 等
添加多个关键帧实现复杂效果
你可以加入中间状态让动画更丰富。比如一个弹跳效果：
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }这个动画在起点和终点位置居中，中间向上移动 20px，形成弹跳感。
注意事项与技巧
确保动画性能良好，尽量只动画 transform 和 opacity 属性，因为它们不会触发重排，效率更高。
- 避免动画 width、height、margin、padding 等会引发布局变化的属性
- 可以结合 will-change 提示浏览器优化动画元素
- 在移动端注意动画强度，避免过度影响用户体验
