如何用CSS实现元素的切割动画效果？

方案一：调整遮罩尺寸实现完整动画 #

你之前的问题出在遮罩尺寸与渐变的组合逻辑上，把遮罩高度设为元素的2倍，配合渐变就能实现从切割到完整显示的动画，同时完全保持原盒子尺寸不变：

.el {
  /* 匹配文本1em高度，固定元素尺寸 */
  line-height: 1em;
  height: 1em;
  /* 渐变遮罩：上半部分可见，下半部分透明 */
  mask-image: linear-gradient(to bottom, white 50%, transparent 50%);
  /* 遮罩高度设为元素的2倍，宽度与元素一致 */
  mask-size: 100% 200%;
  /* 初始位置：仅显示元素上半部分 */
  mask-position: 0 0;
  transition: mask-position 0.3s ease;
  /* 确保元素保持布局占位 */
  display: inline-block;
}

/* 触发动画时移动遮罩，显示完整元素 */
.el.active {
  mask-position: 0 100%;
}

原理：遮罩高度是元素的2倍，初始时只有上半段遮罩覆盖元素，因此仅显示上半段文本；当遮罩位置向下移动100%，下半段遮罩覆盖元素，整个文本完全显示，过渡过程就是切割展开的动画效果。

如果需要从中间向上下双向展开的切割效果，可以改用双重渐变遮罩：

.el {
  line-height: 1em;
  height: 1em;
  /* 中间50%可见、上下透明的渐变 */
  mask-image: linear-gradient(to bottom, transparent 0%, white 25%, white 75%, transparent 100%);
  mask-size: 100% 200%;
  mask-position: 0 50%;
  transition: mask-position 0.3s ease;
  display: inline-block;
}

.el.active {
  mask-position: 0 0%;
}

方案二：伪元素双层叠加（兼容性更优） #

如果遮罩方案有浏览器兼容性顾虑，可以用伪元素复制内容，分别对上半、下半部分做动画，原元素仅保留布局占位：

.el {
  position: relative;
  line-height: 1em;
  height: 1em;
  display: inline-block;
  /* 原元素文本透明，仅占位置 */
  color: transparent;
}

.el::before, .el::after {
  content: attr(data-text); /* 用data属性存储文本内容 */
  position: absolute;
  left: 0;
  width: 100%;
  color: #000; /* 设置原文本颜色 */
  overflow: hidden;
  transition: transform 0.3s ease;
}

.el::before {
  top: 0;
  height: 50%;
  /* 初始向上隐藏 */
  transform: translateY(-100%);
}

.el::after {
  bottom: 0;
  height: 50%;
  /* 初始向下隐藏 */
  transform: translateY(100%);
}

.el.active::before, .el.active::after {
  transform: translateY(0);
}

使用时给元素添加data-text属性：

<span class="el" data-text="Hello World"></span>

原理：原元素保持尺寸占位，两个伪元素分别承载上下半段文本，通过transform实现从上下向中间展开的动画，视觉上呈现切割效果。

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