如何实现带透视效果的向上滑入文字揭示动画？

纯CSS实现示例 #

下面是模拟目标效果的可运行代码，核心利用CSS 3D变换与关键帧动画实现从下方后方滑入的曲线轨迹：

<!DOCTYPE html>
<html>
<head>
<style>
/* 开启3D空间，让Z轴变换产生深度感 */
.title-wrapper {
  perspective: 800px;
  padding: 60px 20px;
}

.animated-heading {
  font-size: 2.8rem;
  font-weight: 700;
  color: #2d3748;
  /* 初始状态：隐藏在下方+向后拉+向下倾斜 */
  transform: translateY(120px) translateZ(-220px) rotateX(25deg);
  opacity: 0;
  /* 动画参数：时长、缓动方式、结束后保持最终状态 */
  animation: curveSlideIn 1.3s ease-out forwards;
}

/* 关键帧定义动画轨迹 */
@keyframes curveSlideIn {
  100% {
    transform: translateY(0) translateZ(0) rotateX(0);
    opacity: 1;
  }
}
</style>
</head>
<body>
<div class="title-wrapper">
  <h1 class="animated-heading">Personalize Videos at Scale</h1>
</div>
</body>
</html>

效果调整技巧 #

如果想要更贴合示例的曲线弧度，可以给关键帧增加中间过渡节点，让动画轨迹更自然：

@keyframes curveSlideIn {
  0% {
    transform: translateY(140px) translateZ(-280px) rotateX(30deg);
    opacity: 0;
  }
  55% {
    transform: translateY(30px) translateZ(-60px) rotateX(12deg);
    opacity: 0.75;
  }
  100% {
    transform: translateY(0) translateZ(0) rotateX(0);
    opacity: 1;
  }
}

简化开发的动画库方案 #

如果不想手动调试CSS，这些工具可以快速实现类似效果：

• Animate.css：基础的slideInUp类配合自定义3D变换，能快速搭建基础框架，再微调参数适配需求
• GSAP：专业动画库，支持自定义运动路径，可以精准控制文字的曲线滑入轨迹，适合需要精细效果的场景

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