Javascript 重新创建文本动画（内的源）

我想重新创建我在这个网站主题的屏幕视频中看到的文本动画：

以下是演示动画的视频：

---

我不确定从哪里开始，到目前为止，在我的搜索中找不到任何类似的东西，我对创建jQuery之类的东西持开放态度。谢谢你的帮助

我会使用两个绝对定位文本，一个是灰色（或半透明）文本，另一个是顶部设置为

溢出：隐藏的
。然后我只需要设置第二个容器的宽度的动画

你觉得这个主意怎么样？：）

编辑：
稍微调整一下，但想法是一样的-为你拉小提琴：

非常重要的CSS规则：

white-space: nowrap;

防止在文本节点的宽度小于文本的宽度时断行

编辑2：
当然，idea允许您使用纯CSS实现结果，jQuery的角色只是设置宽度动画

HTML:

jQuery：

$('.text.upper').animate({width:'100%'},3000).animate({width:'0%'},3000);

我会使用两个绝对定位文本，一个是灰色（或半透明）文本，另一个是顶部设置为
overflow:hidden
。然后我只需要设置第二个容器的宽度的动画

你觉得这个主意怎么样？：）

编辑：
稍微调整一下，但想法是一样的-为你拉小提琴：

非常重要的CSS规则：

white-space: nowrap;

防止在文本节点的宽度小于文本的宽度时断行

编辑2：
当然，idea允许您使用纯CSS实现结果，jQuery的角色只是设置宽度动画

HTML:

jQuery：

$('.text.upper').animate({width:'100%'},3000).animate({width:'0%'},3000);

动画是在纯CSS3中实现的：


HTML:

他们使用一个
h1
而不是覆盖两个
h1
元素并设置第二个元素的一个宽度动画的原因之一就是为了更好地搜索引擎优化，一个页面应该只包含一个
h1
元素。还使用
内容：attr（数据内容）非常有趣，因此…
动画是在纯CSS3中实现的：


HTML:

他们使用一个
h1
而不是覆盖两个
h1
元素并设置第二个元素的一个宽度动画的原因之一就是为了更好地搜索引擎优化，一个页面应该只包含一个
h1
元素。还使用
内容：attr（数据内容）
非常有趣，所以…
谢谢你的帮助，但是在jsBin中我没有看到动画发生：（我不知道它是否是我的浏览器？我正在运行最新版本的Google Chrome。@jjfxx抱歉，我忘了（实际上我认为可以理解省略）添加所有特定于浏览器的
属性：）现在可以工作了！非常感谢你的帮助！两个答案都很好，但这只会让我接受一个，我没有足够的代表投票，但我也非常感谢你的答案@jjfxx:）你真是太好了！：）谢谢没问题！我刚刚向您展示了如何使用CSS3完成您在该页面上看到的事情，但我也会像Entio一样使用jQuery完成。快乐编码！谢谢你的帮助，但在jsBin中，我没有看到动画发生：（我不知道这是否是我的浏览器？我正在运行最新版本的Google Chrome。@jjfxx抱歉，我忘记（实际上我认为省略是可以理解的）添加所有特定于浏览器的属性：）现在可以工作了！非常感谢你的帮助！两个答案都很好，但这只会让我接受一个，我没有足够的代表投票，但我也非常感谢你的答案@jjfxx:）你真是太好了！：）谢谢没问题！我刚刚向您展示了如何使用CSS3完成您在该页面上看到的事情，但我也会像Entio一样使用jQuery完成。快乐编码！哇，很好，很简单。非常感谢！：）我喜欢这个解决方案，因为代码“更少”（不包括整个jQuery库）、xBrowser和维护。请。。。jsFiddle不是StackOverflow的联盟，有一天它可能会放弃它的服务，所以总是尝试在你的答案中包含所需的代码。@RokoC.Buljan你说得很好，我从来没有想到过它的可靠性。我自己的经验告诉我，在粘贴的代码中很难找到任何东西，在实时的fiddle示例中很容易看到“事物是如何工作的”。谢谢你让我从不同的角度看它！哇，很好，很简单。非常感谢！：）我喜欢这个解决方案，因为代码“更少”（不包括整个jQuery库）、xBrowser和维护。请。。。jsFiddle不是StackOverflow的联盟，有一天它可能会放弃它的服务，所以总是尝试在你的答案中包含所需的代码。@RokoC.Buljan你说得很好，我从来没有想到过它的可靠性。我自己的经验告诉我，在粘贴的代码中很难找到任何东西，在实时的fiddle示例中很容易看到“事物是如何工作的”。谢谢你让我从不同的角度看它！
<div class="modal">
  <h1 data-content="YOUR BEAUTIFUL NAME">YOUR BEAUTIFUL NAME</h1>
</div>

.modal h1 {
    color: #626161;
    font-size: 30px;
    left: 50%;
    margin-left: -125px;
    margin-top: -15px;
    position: absolute;
    text-align: center;
    top: 50%;
}
.modal h1:before {
    animation: 5s ease 0s normal none 1 loading;
    -o-animation: 5s ease 0s normal none 1 loading;
    -ms-animation: 5s ease 0s normal none 1 loading;
    -moz-animation: 5s ease 0s normal none 1 loading;
    -webkit-animation: 5s ease 0s normal none 1 loading;
    color: #E2E2E2;
    content: attr(data-content);
    max-width: 100%;
    overflow: hidden;
    position: absolute;
    white-space:nowrap;
}
@keyframes loading {
  0% { max-width: 0%; }
}
@-o-keyframes loading {
  0% { max-width: 0%; }
}
@-ms-keyframes loading {
  0% { max-width: 0%; }
}
@-moz-keyframes loading {
  0% { max-width: 0%; }
}
@-webkit-keyframes loading {
  0% { max-width: 0%; }
}