css animation是css3引入的动画模块，通过定义关键帧和动画属性，可以让元素在不依赖JavaScript的情况下实现各类动态效果，其中元素缩放渐变效果就是非常典型的应用场景，核心是结合@keyframes规则定义缩放变化过程，再用animation属性将动画绑定到目标元素上。
实现缩放渐变效果的核心语法
1. 定义关键帧动画
使用@keyframes规则定义动画的不同阶段状态，缩放效果主要通过transform: scale()实现，scale函数的参数表示缩放倍数，1为原始大小，小于1是缩小，大于1是放大。
/* 定义名为scaleFade的动画 */
@keyframes scaleFade {
/* 动画起始状态：原始大小，完全不透明 */
0% {
transform: scale(1);
opacity: 1;
}
/* 动画中间状态：放大到1.5倍，半透明 */
50% {
transform: scale(1.5);
opacity: 0.5;
}
/* 动画结束状态：缩小到0.8倍，完全透明 */
100% {
transform: scale(0.8);
opacity: 0;
}
}
2. 绑定动画到元素
通过animation属性将定义好的动画应用到目标元素，animation是多个动画相关属性的简写，常用属性包括动画名称、时长、缓动函数、延迟时间、循环次数等。
/* 目标元素的样式 */
.target-element {
width: 100px;
height: 100px;
background-color: #409eff;
/* 绑定动画：动画名 时长 缓动函数 循环次数 */
animation: scaleFade 2s ease-in-out infinite;
}
完整示例代码
下面是一个可以直接运行的完整示例，页面加载后会看到一个蓝色方块持续执行缩放渐变效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css animation缩放渐变示例</title>
<style>
/* 定义缩放渐变动画 */
@keyframes scaleFade {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(0.8);
opacity: 0;
}
}
/* 目标元素样式 */
.box {
width: 120px;
height: 120px;
background-color: #409eff;
border-radius: 8px;
/* 应用动画：2秒完成一次，缓动效果，无限循环 */
animation: scaleFade 2s ease-in-out infinite;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
常用动画属性说明
除了基本的动画绑定，还可以根据需求调整以下属性：
- animation-duration：动画完成一个周期的时间，单位为s（秒）或ms（毫秒）
- animation-timing-function：动画的缓动函数，常用值有linear（匀速）、ease（慢快慢）、ease-in（慢入）、ease-out（慢出）
- animation-delay：动画开始前的延迟时间
- animation-iteration-count：动画循环次数，infinite表示无限循环，也可以写具体数字
- animation-direction：动画播放方向，normal为正常播放，alternate为奇偶次反向播放
注意事项
使用scale实现缩放时，元素默认的缩放原点是中心位置，如果需要调整缩放原点，可以使用transform-origin属性，比如设置transform-origin: top left;会让元素从左上角开始缩放。另外如果元素缩放后影响到周边布局，可以给元素设置固定的宽高，或者父容器预留足够的空间，避免页面布局抖动。
css_animationscaletransformkeyframes修改时间：2026-06-16 04:36:30