本教程详细阐述如何利用css `keyframes` 实现一个两阶段的图形动画：首先从页面左侧中点水平滑动至屏幕中心，随后从屏幕中心对角线滑动至左上角。通过精确设置关键帧的百分比和对应的`top`、`left`属性，结合`animation-fill-mode: forwards`，可创建流畅且停留在最终状态的复杂动画效果。
在现代网页设计中，动画是提升用户体验和页面活力的重要手段。CSS动画提供了一种声明式的方式来创建各种动态效果，而@keyframes规则则是实现复杂、多阶段动画的核心。本文将深入探讨如何利用@keyframes实现一个图形元素先水平移动再对角线移动的复合动画效果。
理解多阶段动画的原理
CSS动画通过定义一系列关键帧（keyframes）来描述元素在不同时间点的样式。每个关键帧都由一个百分比值（0%到100%）表示动画进程中的特定时刻，并定义了该时刻元素应具有的CSS属性。浏览器会在这些关键帧之间平滑地过渡元素的样式。
对于需要按顺序执行多个不同方向或类型的动画，我们只需在同一个@keyframes规则中定义多个中间关键帧。例如，要实现“先水平后对角线”的动画，我们可以将动画总时长划分为几个阶段，并在每个阶段的结束点设置一个关键帧。
动画实现步骤
我们将通过一个具体的例子来演示如何实现上述动画：一个图形（例如一个div元素）首先从页面左侧中点水平滑动到屏幕中心，然后从屏幕中心对角线滑动到屏幕左上角。
立即学习“前端免费学习笔记（深入）”；
1. HTML结构准备
首先，我们需要一个承载动画的HTML元素。这里我们使用一个简单的div：
IMAGE
2. CSS基础样式与动画属性
为了让div元素能够精确地定位和动画，我们需要为其设置position: absolute，并定义动画的基本属性，如动画名称、持续时间、缓动函数以及动画填充模式。
#img1 { /* 初始定位：垂直居中 */ top: 50%; /* 将元素显示为块级元素 */ display: block; /* 启用绝对定位，以便使用top和left进行精确移动 */ position: absolute; /* 定义动画：名称 持续时间 缓动函数 填充模式 */ animation: image1 10s linear forwards; /* 可选：设置元素尺寸和背景色以便观察 */ width: 100px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; color: white; font-weight: bold;}
关键属性解释：
top: 50%;: 将元素的顶部边缘定位在父容器的垂直中点。position: absolute;: 允许我们使用top和left属性相对于其最近的已定位祖先元素进行定位。animation: image1 10s linear forwards;:image1: 动画的名称，对应@keyframes image1。10s: 动画的总持续时间为10秒。linear: 动画的缓动函数，表示动画以恒定速度进行。forwards: animation-fill-mode属性，表示动画结束后，元素将保持其最终关键帧（100%）定义的样式，而不是返回到初始状态。
3. 定义关键帧 (@keyframes)
这是实现多阶段动画的核心。我们需要定义三个关键帧来描述动画的三个重要状态：
0%：动画开始时的状态（左侧中点）。50%：动画进行到一半时的状态（屏幕中心），这是水平移动的终点和对角线移动的起点。100%：动画结束时的状态（左上角）。
@-webkit-keyframes image1 { /* 考虑兼容性，添加 -webkit- 前缀 */ 0% { left: 0; /* 从左边缘开始 */ top: 50%; /* 垂直居中 */ /* transform: translateX(0); 如果需要更精细的控制，可以配合transform */ } 50% { left: 50%; /* 水平移动到屏幕中心 */ top: 50%; /* 保持垂直居中 */ } 100% { left: 0; /* 对角线移动到左边缘 */ top: 0; /* 对角线移动到顶部边缘 */ }}@keyframes image1 { /* 标准语法 */ 0% { left: 0; top: 50%; } 50% { left: 50%; top: 50%; } 100% { left: 0; top: 0; }}
关键帧解释：
0%:left: 0;: 元素位于父容器的最左侧。top: 50%;: 元素垂直居中。这定义了动画的起始点：页面左边缘的垂直中点。50%:left: 50%;: 元素水平移动到父容器的中心。top: 50%;: 元素保持垂直居中。这定义了动画的第一阶段（水平滑动）的终点，同时也是第二阶段（对角线滑动）的起点。动画的前50%时间（即5秒）将用于从0%状态过渡到50%状态。100%:left: 0;: 元素水平移动到父容器的最左侧。top: 0;: 元素垂直移动到父容器的最顶部。这定义了动画的最终状态：页面的左上角。动画的后50%时间（即5秒）将用于从50%状态过渡到100%状态，从而实现对角线滑动。
完整示例代码
将上述HTML和CSS代码整合，即可实现所需的多阶段动画效果。
CSS多阶段动画：水平后对角线滑动 body { margin: 0; overflow: hidden; /* 防止滚动条出现 */ height: 100vh; /* 确保body占满整个视口高度 */ position: relative; /* 为#img1提供定位上下文 */ } #img1 { top: 50%; display: block; position: absolute; animation: image1 10s linear forwards; width: 100px; height: 100px; background-color: lightblue; text-align: center; line-height: 100px; color: white; font-weight: bold; transform: translateY(-50%); /* 修正top:50%导致元素中心不在中线的问题 */ } /* 兼容性前缀 */ @-webkit-keyframes image1 { 0% { left: 0; top: 50%; -webkit-transform: translateY(-50%); } 50% { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); /* 确保元素中心在屏幕中心 */ } 100% { left: 0; top: 0; -webkit-transform: translateY(0); /* 确保元素左上角在屏幕左上角 */ } } /* 标准语法 */ @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: translateY(0); } }IMAGE
注意： 在上述示例中，为了更精确地控制元素的中心点，我引入了transform: translateY(-50%)和transform: translate(-50%, -50%)。
top: 50%; transform: translateY(-50%);：将元素的垂直中线对齐到父容器的垂直中线。left: 50%; top: 50%; transform: translate(-50%, -50%);：将元素的中心对齐到父容器的中心。left: 0; top: 0; transform: translateY(0);：将元素的左上角对齐到父容器的左上角。这样可以确保动画路径是基于元素中心或左上角的精确移动。
注意事项与优化
动画持续时间 (animation-duration): 根据需求调整动画的总时长。如果动画阶段较多或需要更长的停留时间，可以增加总时长。缓动函数 (animation-timing-function): linear提供恒定速度，但你可以尝试其他值如ease-in、ease-out、ease-in-out或自定义cubic-bezier函数，以获得更自然的动画效果。更多关键帧: 如果需要更复杂的路径或在某个点暂停，可以添加更多的关键帧（例如25%、75%等），并在这些关键帧中定义元素的样式。浏览器兼容性: 始终考虑添加浏览器前缀（如-webkit-、-moz-等）以确保动画在不同浏览器中的兼容性。尽管现代浏览器对标准语法支持良好，但旧版本可能仍需要前缀。性能优化: 尽量使用transform属性进行动画（如translateX, translateY）而不是top和left，因为transform通常由GPU加速，性能更优。在本例中，为了演示top和left的直接控制，我们主要使用了它们，但在实际项目中可以考虑用transform重构。
总结
通过灵活运用CSS的@keyframes规则，我们可以轻松实现各种复杂的多阶段动画。关键在于将动画分解为多个逻辑阶段，并在每个阶段的起始和结束点定义清晰的CSS样式。结合animation属性的各种参数，如持续时间、缓动函数和填充模式，我们可以创建出丰富且富有表现力的网页动态效果。
以上就是CSS实现图形先水平后对角线滑动的多阶段动画教程的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585805.html
微信扫一扫 
支付宝扫一扫 
