使用 CSS Keyframes 实现多阶段复杂路径动画：以水平后对角线移动为例
最新回答
意志以颓废
2022-03-03 00:37:46
使用 CSS Keyframes 实现水平后对角线移动的多阶段动画，需通过定义关键帧位置并结合 position: absolute 和 animation 属性完成。 以下是具体实现步骤与代码示例：
核心原理- @keyframes 规则：通过百分比（0%、50%、100%）划分动画阶段，定义元素在不同时间点的位置状态。
- 定位控制：使用 position: absolute 脱离文档流，结合 left 和 top 属性控制元素位置。
- 动画属性：通过 animation 简写属性设置动画名称、时长、缓动函数和结束状态（如 forwards 保持最终位置）。
HTML 结构创建一个 div 元素作为动画对象，赋予唯一 ID（如 img1）：
<div id="img1">IMAGE</div>基础样式定义为元素设置绝对定位、初始垂直居中，并配置动画属性：
#img1 { position: absolute; top: 50%; /* 初始垂直居中 */ display: block; width: 100px; height: 100px; background-color: #3498db; color: white; border-radius: 5px; animation: image1 10s linear forwards; /* 动画名称、时长、缓动、保持结束状态 */}关键帧动画路径定义 @keyframes 规则，分阶段控制元素位置：
0%：元素位于页面左侧中点（left: 0; top: 50%;），通过 transform: translateY(-50%) 修正垂直居中。
50%：水平移动到屏幕中心（left: 50%; top: 50%;），通过 transform: translate(-50%, -50%) 修正中心对齐。
100%：对角线移动到左上角（left: 0; top: 0;），移除 transform。
@keyframes image1 { 0% { left: 0; top: 50%; transform: translateY(-50%); /* 修正垂直居中 */ } 50% { left: 50%; top: 50%; transform: translate(-50%, -50%); /* 修正水平垂直居中 */ } 100% { left: 0; top: 0; transform: translate(0, 0); /* 移动到左上角 */ }}完整代码示例结合 HTML 和 CSS，实现完整动画效果：
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS 多阶段路径动画</title> <style> body { margin: 0; overflow: hidden; height: 100vh; width: 100vw; position: relative; background-color: #f0f0f0; } #img1 { position: absolute; top: 50%; display: block; width: 100px; height: 100px; background-color: #3498db; color: white; border-radius: 5px; animation: image1 10s linear forwards; } @keyframes image1 { 0% { left: 0; top: 50%; transform: translateY(-50%); } 50% { left: 50%; top: 50%; transform: translate(-50%, -50%); } 100% { left: 0; top: 0; transform: translate(0, 0); } } </style></head><body> <div id="img1">IMAGE</div></body></html>
- animation-fill-mode: forwards：确保动画结束后元素保持最终状态，避免返回初始位置。
- 精确居中修正：通过 transform: translate(-50%, -50%) 修正 left: 50%; top: 50%; 的定位偏差（因默认以左上角为基准）。
- 性能优化：
简单平移动画优先使用 transform（如 translateX、translateY），因其由 GPU 加速，性能更优。
需精确控制绝对位置时（如本例），left/top 结合 position: absolute 仍是直观选择，现代浏览器优化后性能差异可忽略。
- 扩展复杂路径：通过增加关键帧（如 20%、40%）定义更多转折点，实现更复杂的运动轨迹。
通过 CSS Keyframes 分阶段定义元素位置，结合 position: absolute 和 animation 属性，可轻松实现水平后对角线移动的多阶段动画。掌握关键帧划分、定位修正和动画属性配置，能显著提升网页动态效果的表现力和用户体验。
热门标签
