文本动画过渡

Question

这是我的JS FIDDLE

我想在我的文字（.text）上进行与此网站相同的动画转换：https://stevenmengin.com/

我不知道如何从底部开始使用＆＃34;剪切效果＆＃34;。

我该怎么办？

.text {
    width: 100%;
    margin: auto;
    text-align: left;
    left: 10%;
    opacity: 0;
    position: fixed;
    z-index: 1;
    top: 50%;
    margin-top: 0px;
    visibility: hidden;
  transition : all 0.5s;
}



.text.active {
    opacity: 1;
  margin-top:-150px;
  width: 100%;
    z-index: 2;
    visibility: visible;
}