如何用圆形遮罩动画隐藏div元素？

Motion One（Solid）实现 #

核心思路是用CSS变量控制遮罩渐变的分界点，通过Motion One动画这个变量实现平滑过渡，避免直接动画mask-image导致的跳变问题。

代码示例 #

import { motion } from "motion-one/solid";

export default function CircleMaskDemo() {
  return (
    <div class="demo-container">
      <motion.div
        class="masked-box"
        animate={{ "--mask-size": "0%" }}
        transition={{ duration: 1.5, ease: "easeOut" }}
      >
        <p>圆形遮罩隐藏效果</p>
      </motion.div>
    </div>
  );
}

对应的CSS：

.demo-container {
  width: 300px;
  height: 300px;
  background: #f0f0f0;
}

.masked-box {
  width: 100%;
  height: 100%;
  background: #2196f3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  
  /* 用CSS变量定义遮罩分界点，初始值覆盖整个元素 */
  --mask-size: 100%;
  -webkit-mask-image: radial-gradient(circle at center, black var(--mask-size), transparent var(--mask-size));
  mask-image: radial-gradient(circle at center, black var(--mask-size), transparent var(--mask-size));
}

纯CSS实现 #

同样借助CSS变量，用@keyframes动画变量值：

.demo-container {
  width: 300px;
  height: 300px;
  background: #f0f0f0;
}

.masked-box {
  width: 100%;
  height: 100%;
  background: #2196f3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  
  --mask-size: 100%;
  -webkit-mask-image: radial-gradient(circle at center, black var(--mask-size), transparent var(--mask-size));
  mask-image: radial-gradient(circle at center, black var(--mask-size), transparent var(--mask-size));
  
  /* 定义动画 */
  animation: circleHide 1.5s ease-out forwards;
}

@keyframes circleHide {
  to {
    --mask-size: 0%;
  }
}

原理说明 #

直接动画mask-image时，浏览器无法解析渐变内部的百分比数值进行插值，只能在整个渐变规则间硬切换。而动画CSS变量时，变量是单一数值类型，浏览器可以平滑插值，进而带动渐变分界点持续变化，实现圆形遮罩逐步缩小的过渡效果。

内容的提问来源于stack exchange，提问作者kalempster