html - CSS 中滚动文本的问题

Question

我尝试使用 css3 过渡来尝试滚动文本，它对我来说看起来不错，但由于某种原因似乎不起作用。真的很感激一些帮助。提前致谢。

.scrollingtext {  
 height: 200px;   
 overflow: hidden;  
 position: relative;  
}

.scrollingtext h1 {  
 position: absolute;  
 width: 100%;  
 height: 100%;  
 margin: 0;  
 line-height: 50px;  
 text-align: center;  
-moz-transform:translateY(-100%);  
-webkit-transform:translateY(-100%);      
 transform:translateY(-100%);  
-moz-animation: scrollingtext 15s linear infinite;  
-webkit-animation: scrollingtext 15s linear infinite;  
 animation: scrollingtext 15s linear infinite;  
}  


@-moz-keyframes scrollingtext {  
0%   { -moz-transform: translateY(-100%); }  
100% { -moz-transform: translateY(100%); }  
}
@-webkit-keyframes scrollingtext {  
0%   { -webkit-transform: translateY(-100%); }  
100% { -webkit-transform: translateY(100%); }  
}  
@keyframes scrollingtext {  
0%     {     
-moz-transform: translateY(-100%);  
-webkit-transform: translateY(-100%  );   
 transform: translateY(-100%);      



 }  
 100% {   
 -moz-transform: translateY(100%);   
 -webkit-transform: translateY(100%);   
 transform: translateY(100%);   
 }  
}  

https://jsfiddle.net/v656vx5o/2/

Answer 1

您在 html scrolltext 中调用了错误的类

<div class="scrolltext">
  <h1 align="center" div id="h11">text</h1>
</div>

应该是:

<div class="scrollingtext">
  <h1 align="center" div id="h11">text</h1>
</div>