通过@keyframes定义动画关键帧，结合animation属性实现元素移动与透明度渐变。1. 使用transform和opacity设置0%、50%、100%阶段的位移与透明度；2. 将moveAndFade动画绑定到元素，设时长3s、曲线ease-in-out、无限循环；3. HTML中添加.animated-element div触发动画；4. 可选forwards保持最终状态。
要实现元素的移动与透明度渐变，可以使用 CSS 的 @keyframes 配合 animation 属性。通过定义关键帧来控制元素在动画过程中的位置和透明度变化，从而实现平滑的视觉效果。
1. 定义关键帧（@keyframes）
使用 @keyframes 来设定动画的不同阶段。你可以通过 transform 实现位移，用 opacity 控制透明度。
@keyframes moveAndFade { 0% { transform: translateX(0); opacity: 0; } 50% { transform: translateX(100px); opacity: 0.5; } 100% { transform: translateX(200px); opacity: 1; } }上面的动画从左侧开始（0px），逐步向右移动到 200px，同时透明度从 0（完全透明）渐变到 1（完全不透明）。
2. 应用动画到元素
将定义好的动画绑定到目标元素上，设置动画时长、重复次数、时间函数等属性。
立即学习“前端免费学习笔记（深入）”；
.animated-element { width: 100px; height: 100px; background-color: blue; animation: moveAndFade 3s ease-in-out infinite; }说明：
- moveAndFade：引用的关键帧名称
- 3s：动画持续时间为 3 秒
- ease-in-out：动画先慢后快再慢，更自然
- infinite：无限循环播放
3. HTML 结构示例
结合上述 CSS，这个蓝色方块会从原位置向右移动 200px，同时由完全透明逐渐变为不透明，循环执行。
4. 可选优化：动画结束后保持最终状态
如果不想让动画回到初始状态，可以添加 animation-fill-mode: forwards;
.animated-element { animation: moveAndFade 3s ease-out 1 forwards; }这样动画结束后元素会停留在最后一帧的状态（即 translateX(200px) 且 opacity: 1）。
基本上就这些。通过组合 transform 和 opacity，你可以轻松实现移动加淡入淡出的效果，适用于提示框、加载动画、按钮反馈等场景。不复杂但容易忽略细节，比如 fill-mode 和 timing function 的选择会影响体验。
