字幕标记替代问题

如何解决字幕标记替代问题

我有一个网页，我需要像过时的字幕标记一样在其上滚动文本，我正在使用下面的代码，但是它有问题。它不会滚动整个文本。我有一个很长的文字，它只滚动了一部分。

<style>
        .example1 {
  height: 50px; 
  overflow: hidden;
  position: relative;
}
.example1 h3 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;

    /* Starting position */
       -moz-transform:translateX(100%);
       -webkit-transform:translateX(100%);  
       transform:translateX(100%);

 /* Apply animation to this element */  
       -moz-animation: example1 100s linear infinite;
       -webkit-animation: example1 100s linear infinite;
       animation: example1 50s linear infinite;
       animation-direction:reverse;

}

/* Move it (define the animation) */
      @-moz-keyframes example1 {
       0%   { -moz-transform: translateX(100%); }
       100% { -moz-transform: translateX(-100%); }
      }
      @-webkit-keyframes example1 {
       0%   { -webkit-transform: translateX(100%); }
       100% { -webkit-transform: translateX(-100%); }
      }
      @keyframes example1 {
       0%   { 
       -moz-transform: translateX(100%); /* Firefox bug fix */
       -webkit-transform: translateX(100%); /* Firefox bug fix */
       transform: translateX(100%);         
       }
       100% { 
       -moz-transform: translateX(-100%); /* Firefox bug fix */
       -webkit-transform: translateX(-100%); /* Firefox bug fix */
       transform: translateX(-100%); 
       }
      }
    
    </style>

我需要滚动长文本，该如何解决？ 还有一件事，是否有办法在鼠标悬停时停止滚动？ 谢谢