可用@keyframes配合transform:scale()实现头像缓慢放大动画，起始缩放0.85并配opacity渐变，用cubic-bezier缓动和forwards保持终态，transform-origin:center确保居中缩放。
可以用 CSS 的 @keyframes 配合 transform: scale() 实现头像缓慢放大的进入动画，关键在于控制起始缩放值（如 scale(0.8)）到目标值（如 scale(1)），并搭配合适的缓动函数和持续时间。
定义 zoom-in 动画帧
在 CSS 中声明一个名为 zoom-in 的动画，从缩小状态平滑过渡到原始大小：
@keyframes zoom-in {
from {
transform: scale(0.85);
opacity: 0.7;
}
to {
transform: scale(1);
opacity: 1;
}
}
这里用了略小于 1 的起始缩放（避免突兀）和透明度配合，让入场更柔和。
应用动画到头像元素
给头像的 class 或标签添加动画属性，注意启用硬件加速提升流畅度：
立即学习“前端免费学习笔记（深入）”；
.avatar {
width: 80px;
height: 80px;
border-radius: 50%;
animation: zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
transform-origin: center;
}
-
0.4s控制动画时长，可根据需要调为0.5s或0.3s -
cubic-bezier(0.34, 1.56, 0.64, 1)是一种轻微“回弹感”的缓动，比默认ease更生动；也可用ease-out更稳重 -
forwards确保动画结束后保持最终状态（scale(1)和opacity:1），不会回退 -
transform-origin: center让缩放以中心为基点，避免偏移
触发时机建议（可选）
如果头像是页面加载后才显示（比如异步渲染或懒加载），可结合 JS 添加类来触发动画，避免一进页面就动：
<img src="avatar.jpg" class="avatar" />
JS 中等元素出现在视口或数据就绪后添加动画类：
avatarEl.classList.add('animate');
CSS 中写：
.avatar.animate {
animation: zoom-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
基本上就这些。不复杂但容易忽略的是 forwards 和 transform-origin，加了才自然。
