如何做一个透明度渐现且向上位移逐行出现的文字效果

前言

在这个夜黑风高的夜晚，你的眼睛已经开始有些疲惫。你的手指在键盘上轻轻地敲击着，仿佛在弹奏一首无声的夜曲。你的思绪在代码的海洋中飘荡，寻找着最后一行需要完成的代码。就在这时，你的老板走了过来，他的脸上带着一丝期待也带着一丝压榨廉价劳动力的理所当然。

他说：“我需要你给我们产品首页的标题做一个动画。但是，我希望这个动画能够突出标题的内容，而不是动画本身。我不希望动画太过炫酷，以免分散用户的注意力。”你虽然心生不满，但又不得不做，毕竟老板最近行情不好。既来之，则安之，心想着等行情好了，马上就跑。随后心中开始构思这个动画的设计。

你知道，这个动画需要足够简洁，但又不能太过平淡。它需要有一定的动态效果，但又不能太过夸张。它需要能够吸引用户的注意力，但又不能让用户忽视了标题的内容。你开始在脑海中浮现出一些想法。你想到了透明度渐现的效果，这种效果可以让标题文本像是从黑暗中浮现出来，既有动态感，又不会过于炫酷。你还想到了向上位移的效果，这种效果可以让标题文本像是从页面底部升起，增加了视觉的动态感，但又不会过于夸张。你开始在代码编辑器中敲击键盘，将这些想法转化为代码。你知道，这个夜晚还会很长，但你也知道，当这个动画完成时，你会感到无比的满足和成就感。因为你知道，你正在创造一种新的用户体验，你正在为用户带来一种新的感受。

效果

在我们深入讨论之前，让我们先看一下我们将要实现的效果，下次你想要加工资的时候记得写这个🎉

思路

这个动画效果的关键在于缓动曲线 animation-timing-function 这个属性，也就是缓动曲线。该属性定义了动画的速度变化。在这里使用了贝塞尔函数 cubic-bezier 来更精确地控制文本动画的运动节奏。

animation-timing-function属性有如下几个浏览器预设的值：

• linear：匀速运动
• ease-in ：加速运动
• ease-out：减速运动
• ease：先加速后减速
• cubic-bezier(x1,y1,x2,y2)：贝塞尔函数

关于cubic-bezier可以在cubic-bezier这个网站中进行可视化自定义的调试效果。

代码

    <div class="container">
      <h1 class="text">这里是第一行文字</h1>
      <h2 class="text">这里是第二行文字</h2>
      <h3 class="text">这里是第三行文字</h3>
    </div>
    <style>
      .container {
        text-align: center;
      }
      .text {
        animation-name: textAniKey;
        animation-duration: 1.5s;
        animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
        animation-iteration-count: 1;
        animation-direction: normal;
        animation-fill-mode: both;
      }
      @keyframes textAniKey {
        0% {
          transform: translateY(2vw);
          opacity: 0;
        }
        100% {
          transform: translateY(0vw);
          opacity: 1;
        }
      }
    </style>