如何使用 HTML 和 CSS 创建滑动文本显示动画？

在本文中，我们将实现可用于个人作品集、网站甚至 YouTube 介绍视频的滑动文本显示动画，为我们的视频添加额外的优势，使其在第一时间看起来更有趣和吸引眼球最好的部分是我们将只使用 HTML 和 CSS 来做到这一点。

方法：动画会从第一个文本的出现开始，例如我们把这个词取为“GEEKSFORGEEKS”，然后它会向左滑动，我们的第二个文本是：“A Computer Science Portal For Geeks ”将向右显示（如果您仍然对动画的内容感到困惑，您可以快速滚动到页面末尾并查看输出，以便更好地理解）。

我们将使用不同的关键帧将我们的动画划分为不同的阶段，以使其顺利运行。
关键帧保存元素在特定时间将具有的样式。使用以下关键帧：

• @keyframes出现：在这个关键帧中，我们将处理第一个文本出现的方式。
• @keyframes 滑动：在这个关键帧中，我们将尝试以滑动的方式移动文本。
• @keyframes 显示：在此关键帧中，我们将显示第二个文本。

下面是上述方法的实现。

示例：在本示例中，我们将使用上面定义的属性来创建动画。

index.html

   
      
   
   
   
      
GEEKSFORGEEKS
      

         A Computer Science Portal For Geeks
      
   

输出：

注意：对于其他不同长度的文本，应相应更改文本的宽度和字体大小。