mask-size动画必须搭配mask-image才生效，单独设置无效；需用radial-gradient定义遮罩源，通过mask-size百分比变化实现由内向外展开效果，并注意浏览器兼容性与定位依赖。
mask-size 动画必须搭配 mask-image 才生效
单独写 mask-size: 0 或加 transition 不会触发任何动画，因为 CSS mask 是一个复合属性，底层依赖 mask-image 提供遮罩源（比如 radial-gradient 或 url()）。没定义 mask-image，mask-size 就是无效声明。
常见错误现象：mask-size: 0 0; transition: mask-size 0.3s; 完全没反应，控制台也不报错——这是最典型的“写了但没生效”陷阱。
- 必须显式设置
mask-image: radial-gradient(circle, black 100%, transparent 100%)（或类似渐变） -
mask-size控制的是这个渐变图案的“绘制尺寸”，不是 DOM 元素大小 - 推荐用
mask-repeat: no-repeat避免重复平铺干扰动效 - 注意：Firefox 对
mask的支持比 Chrome/Safari 更严格，建议优先测试 Chrome
实现由内向外展开的关键是 radial-gradient + 百分比尺寸变化
核心思路是把遮罩起点设为圆心（circle at 50% 50%），初始 mask-size 设极小（如 0% 0%），hover 或触发时放大到覆盖整个元素（如 200% 200%）。
示例代码：
.mask-trigger {
mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
mask-size: 0% 0%;
mask-repeat: no-repeat;
mask-position: center;
transition: mask-size 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mask-trigger:hover {
mask-size: 200% 200%;
}
-
mask-size: 0% 0%表示遮罩图初始缩成一个点，完全透明（即内容全显示） -
mask-size: 200% 200%让渐变圆撑满容器两倍宽高，确保边缘也被覆盖 -
cubic-bezier(0.34, 1.56, 0.64, 1)是关键：第二个参数 >1 实现“过冲”回弹感，模拟自然展开 - 不要用
mask-mode: alpha，它在多数浏览器中仍不被支持
与 clip-path 动画对比：mask 更适合渐变过渡，clip-path 更适合硬边裁剪
clip-path 也能做展开，比如 clip-path: circle(0% at 50% 50%) → circle(100% at 50% 50%)，但它只能做纯黑/白裁剪，无法实现半透明遮罩、模糊叠加或颜色混合效果。
- 需要灰度渐变、阴影融合、文字穿透等视觉层叠？必须用
mask - 只需要简单圆形/多边形入场动画？
clip-path性能更好、兼容性更高（IE 除外） -
mask在 Safari 中需加-webkit-mask前缀才能生效 - 移动端 iOS Safari 对
mask-size过渡有卡顿，建议加will-change: mask-size
容易忽略的定位和尺寸依赖
mask 的生效高度依赖父容器尺寸和自身 mask-position。如果遮罩“只展开一半”或“偏移出界”，大概率是以下原因：
- 父容器没设明确宽高（
height: auto且子内容未撑开时，mask-size: 200%可能远超预期） -
mask-position没配成center，导致圆心偏移 - 用了
mask-border或其他 mask 子属性干扰了主遮罩流 - 背景图用了
background-size: cover，而mask-size是按元素盒模型计算，两者尺度不一致
调试建议：先临时加 border: 1px solid red 看元素真实尺寸，再检查 mask-position 是否对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
