前言
在这个夜黑风高的夜晚，你的眼睛已经开始有些疲惫。你的手指在键盘上轻轻地敲击着，仿佛在弹奏一首无声的夜曲。你的思绪在代码的海洋中飘荡，寻找着最后一行需要完成的代码。就在这时，你的老板走了过来，他的脸上带着一丝期待也带着一丝压榨廉价劳动力的理所当然。
他说：“我需要你给我们产品首页的标题做一个动画。但是，我希望这个动画能够突出标题的内容，而不是动画本身。我不希望动画太过炫酷，以免分散用户的注意力。”你虽然心生不满，但又不得不做，毕竟老板最近行情不好。既来之，则安之，心想着等行情好了，马上就跑。随后心中开始构思这个动画的设计。
你知道，这个动画需要足够简洁，但又不能太过平淡。它需要有一定的动态效果，但又不能太过夸张。它需要能够吸引用户的注意力，但又不能让用户忽视了标题的内容。你开始在脑海中浮现出一些想法。你想到了透明度渐现的效果，这种效果可以让标题文本像是从黑暗中浮现出来，既有动态感，又不会过于炫酷。你还想到了向上位移的效果，这种效果可以让标题文本像是从页面底部升起，增加了视觉的动态感，但又不会过于夸张。你开始在代码编辑器中敲击键盘，将这些想法转化为代码。你知道，这个夜晚还会很长，但你也知道，当这个动画完成时，你会感到无比的满足和成就感。因为你知道，你正在创造一种新的用户体验，你正在为用户带来一种新的感受。
效果
在我们深入讨论之前，让我们先看一下我们将要实现的效果，下次你想要加工资的时候记得写这个🎉
思路
这个动画效果的关键在于缓动曲线 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>
