CSS缩放动画可以通过transform属性的scale相关函数配合动画相关属性实现，常见的实现方式有两种，分别是基于transition的过渡动画和基于animation的关键帧动画，两种方式适用场景不同，实现逻辑也有区别。
方法一：使用transition实现缩放过渡动画
transition属性用于设置元素的过渡效果，当元素的transform属性发生变化时，会按照设定的过渡参数平滑完成变化，适合实现鼠标悬停等触发式的简单缩放效果。
核心语法
transition的常用语法格式为：
/* 过渡属性 过渡时长 过渡曲线 延迟时间 */ transition: transform 0.3s ease 0s;
其中transform是要过渡的属性，这里我们使用scale函数实现缩放，scale函数的参数表示缩放倍数，1为原始大小，小于1是缩小，大于1是放大。
完整示例代码
下面是一个鼠标悬停元素放大1.2倍的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transition缩放示例</title>
<style>
.scale-box {
width: 200px;
height: 200px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
/* 设置过渡效果：transform属性变化过渡0.3秒，缓动曲线为ease */
transition: transform 0.3s ease;
margin: 50px auto;
}
/* 鼠标悬停时放大1.2倍 */
.scale-box:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="scale-box">悬停我放大</div>
</body>
</html>
方法二：使用animation实现关键帧缩放动画
animation属性可以绑定关键帧动画，通过定义不同时间点的样式状态，实现更复杂的缩放动画效果，适合需要自动播放、循环播放或者多阶段变化的缩放场景。
核心语法
首先需要定义关键帧，使用@keyframes规则：
/* 定义名为scale-animation的关键帧动画 */
@keyframes scale-animation {
0% {
transform: scale(1); /* 初始状态原始大小 */
}
50% {
transform: scale(1.3); /* 中间状态放大1.3倍 */
}
100% {
transform: scale(1); /* 结束状态回到原始大小 */
}
}
然后在元素样式中绑定动画：
/* 动画名称 动画时长 缓动曲线 延迟时间 播放次数 是否反向 */ animation: scale-animation 1s ease 0s infinite normal;
完整示例代码
下面是一个无限循环的脉冲缩放动画示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>animation缩放示例</title>
<style>
/* 定义关键帧动画 */
@keyframes pulse-scale {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 200px;
height: 200px;
background-color: #2196F3;
color: white;
display: flex;
align-items: center;
justify-content: center;
/* 绑定动画：使用pulse-scale动画，时长1秒，缓动曲线ease，无限循环 */
animation: pulse-scale 1s ease infinite;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="pulse-box">脉冲缩放动画</div>
</body>
</html>
两种方法的适用场景对比
| 实现方式 | 适用场景 | 优势 | 局限性 |
|---|---|---|---|
| transition过渡 | 鼠标悬停、点击等触发式的简单缩放变化 | 语法简单，代码量少，易于理解 | 只能实现两个状态之间的过渡，无法定义多阶段变化 |
| animation关键帧 | 自动播放、循环播放、多阶段变化的缩放效果 | 可自定义任意时间点的状态，动画效果更丰富 | 语法相对复杂，需要单独定义关键帧规则 |
注意事项
- 使用scale缩放时，元素默认会以自身中心为原点缩放，如果需要修改缩放原点，可以设置
transform-origin属性，比如transform-origin: left top;表示以左上角为缩放原点。 - 缩放动画会触发浏览器的重排重绘，如果页面中存在大量需要缩放的元素，建议控制动画数量，避免影响页面性能。
- 如果需要兼容旧版本浏览器，需要添加对应浏览器的私有前缀，比如
-webkit-transform、-moz-transform等。
CSS缩放动画transformanimationtransition修改时间：2026-07-09 09:48:32