如何使用CSS实现元素缩放和平移动画_transform与animation结合

transform 负责元素变形，animation 控制动画过程。通过 scale 和 translate 实现缩放平移，结合 @keyframes 定义关键帧，设置 duration、timing-function、iteration-count 等参数实现流畅动画，常用于按钮悬停、加载提示等交互场景，提升用户体验。

想让网页元素动起来，比如缩放或平移，CSS 的 transform 和 animation 是最常用的组合。它们配合使用可以创建流畅、高性能的动画效果，无需 JavaScript。

理解 transform：控制元素变形

transform 属性用于对元素进行旋转、缩放、移动或倾斜。实现缩放和平移主要用到两个函数：

• scale(x, y)：调整元素的大小。例如 scale(1.5) 表示放大为原来的 1.5 倍。
• translate(x, y)：在 X 轴和 Y 轴上移动元素。比如 translate(20px, -10px) 向右移动 20px，向上移动 10px。

这些变换不会影响页面中其他元素的布局，非常适合做动画。

定义 animation：控制动画过程

animation 属性用来控制动画的播放方式，需要配合 @keyframes 规则使用。

立即学习“前端免费学习笔记（深入）”；

• @keyframes 定义动画的关键帧，比如从什么状态变到什么状态。
• animation 可设置动画时长、速度曲线、延迟、重复次数等。

例如，你想让一个 div 从缩小状态慢慢放大并向上移动，可以这样写：

CSS 示例：

.animated-box {
  width: 100px;
  height: 100px;
  background: #3498db;
  margin: 50px auto;

  animation: scaleAndMove 2s ease-in-out infinite alternate;
}

@keyframes scaleAndMove {
  from {
    transform: scale(0.5) translate(0, 0);
  }
  to {
    transform: scale(1.2) translate(0, -20px);
  }
}

这段代码会让元素在 2 秒内从 0.5 倍大小、无位移的状态，过渡到 1.2 倍大小并上移 20px，然后反复播放。

无涯·问知

无涯·问知，是一款基于星环大模型底座，结合个人知识库、企业知识库、法律法规、财经等多种知识源的企业级垂直领域问答产品

142

查看详情

常用 animation 属性说明

你可以通过以下属性精细控制动画行为：

• animation-duration：动画持续时间，如 2s。
• animation-timing-function：动画速度曲线，常用有 ease、linear、ease-in-out。
• animation-iteration-count：播放次数，infinite 表示无限循环。
• animation-direction：是否反向播放，alternate 表示来回播放。
• animation-delay：延迟多久开始动画。

这些都可以直接写在 animation 简写属性里。

实际应用场景建议

这种组合常用于按钮悬停效果、加载动画、卡片浮现等交互场景。

例如按钮 hover 缩放：

.btn:hover {
  animation: pop 0.3s forwards;
}

@keyframes pop {
  to {
    transform: scale(1.1);
  }
}

用户鼠标放上去时，按钮轻微放大，提升交互反馈。

基本上就这些。transform 负责“怎么变”，animation 负责“何时变、变多久”。两者结合，简单又强大。注意避免过度使用动画影响体验，保持自然流畅最重要。

以上就是如何使用CSS实现元素缩放和平移动画_transform与animation结合的详细内容，更多请关注php中文网其它相关文章！